Foundation 栅格系统（Grid System） - Foundation教程

一、什么是栅格系统？

栅格系统的主要目的是实现页面布局，并自适应不同屏幕尺寸。

Foundation 的网格系统基于 12 列布局。如果不需要 12 列，可以通过合并列来创建更宽的内容区域。

栅格系统是响应式的：列会根据屏幕尺寸自动调整宽度和排列方式。

例如：在大屏幕上显示为三列，在小屏幕上可能自动变为单列三行。

二、三种屏幕尺寸对应的样式类

Foundation 提供了三种响应式样式类，分别对应不同设备：

类名前缀	适用设备
`.small-*`	手机端
`.medium-*`	平板设备
`.large-*`	电脑设备（笔记本、台式机）

平板设备示例

<div class="row">
    <div class="medium-12 columns">        
    </div>
</div>Code language: HTML, XML (xml)

手机端示例

<div class="row">
  <div class="small-12 columns">.small-12 yellow</div>
</div>Code language: HTML, XML (xml)

三、同时支持多设备的响应式布局

上面的示例只针对单一设备。如果需要同时支持手机、平板、电脑，可以这样写：

<div class="row">
    <div class="small-12 medium-6 large-3 columns">
        中医药管理局：整治打着中医旗号的养生保健服务乱象
    </div>

    <div class="small-12 medium-6 large-3 columns">
        国家市场监管总局：2019年将加快境内审批境外已上市新药
    </div>

    <div class="small-12 medium-6 large-3 columns">
        分析师观点｜中国股市需要华为精神
    </div>

    <div class="small-12 medium-6 large-3 columns">
        卫龙辣条吃出虫子 客服竟然说这个不是虫子_网友
    </div>
</div>Code language: HTML, XML (xml)

读者可以在三种不同设备下查看效果，感受响应式布局的优势。

四、栅格系统使用规则

首先创建一行容器：<div class="row">，这是一个水平行。
在行内添加列，使用 small-num、medium-num、large-num 类。
同一行内列的数量 num 加起来最好等于 12（推荐做法）。
如果列宽总和超过 12，Foundation 会自动换行。

示例一：单列占满整行

<div class="row">
  <div class="small-12 columns">.small-12 yellow</div>
</div>Code language: HTML, XML (xml)

示例二：8 + 4 = 12 列

<div class="row">
  <div class="small-8 columns">.small-8 beige</div>
  <div class="small-4 columns">.small-4 gray</div>
</div>Code language: HTML, XML (xml)

示例三：同时指定 small 和 large 尺寸

<div class="row">
  <div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
  <div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>Code language: HTML, XML (xml)

五、row 默认宽度与宽屏设置

Foundation 默认的 .row 最大宽度如下：

.row {
    margin: 0 auto;
    max-width: 62.5rem;
    width: 100%;
}Code language: CSS (css)

如果需要改为全宽（宽屏）布局，可以自定义 CSS 覆盖默认值：

<style>
    .row {
        max-width: 100%;
    }
</style>Code language: HTML, XML (xml)

完整宽屏示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 栅格系统示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        .row {
            max-width: 100%;
        }
        .columns {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="small-12 medium-6 large-3 columns">
        中医药管理局：整治打着中医旗号的养生保健服务乱象
    </div>
    <div class="small-12 medium-6 large-3 columns">
        国家市场监管总局：2019年将加快境内审批境外已上市新药
    </div>
    <div class="small-12 medium-6 large-3 columns">
        分析师观点｜中国股市需要华为精神
    </div>
    <div class="small-12 medium-6 large-3 columns">
        卫龙辣条吃出虫子 客服竟然说这个不是虫子_网友
    </div>
</div>

<div class="row">
    <div class="small-8 columns">.small-8 beige</div>
    <div class="small-4 columns">.small-4 gray</div>
</div>

<div class="row">
    <div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
    <div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>

</body>
</html>Code language: HTML, XML (xml)

Previous: 文字相关

Next: Foundation 网格 – 水平堆叠