| 小设备手机(<640px) | 中型设备平板电脑(>=640px) | 大型设备笔记本电脑和台式机（>=1200px） | |
| 网格行为 | 一直是水平的 | 折叠开始，水平在断点上方 | 折叠开始，水平在断点上方 |
| 类前缀 | .small-* | .medium-* | .large-* |
| 列数 | 12 | 12 | 12 |
| 可嵌套 | 是 | 是 | 是 |
| 偏移量 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 |
<div class = "row"> <div class = "small-*"></div> <div class = "medium-*"></div> <div class = "large-*"></div> </div> <div class = "row"> ... </div>
| 基本网格类和描述 |
| Large
large-* 类用于大型设备。
|
| Medium
medium-* 类用于中型设备。
|
| Small
small-* 类用于小型设备。
|
| 高级网格和描述 |
| 组合列/行
column 和
row 类用于相同的元素来获取全宽列用作容器。
|
| 嵌套
我们可以将网格列嵌套在其他列中。
|
| 偏移
使用
large-offset-* 或
small-offset-*类，您可以将列向右移动。
|
| 不完整的行
当行不包括最多 12 列时，Foundation 会自动将最后一个元素向右浮动。
|
| 折叠/展开行
使用媒体查询大小，将折叠和展开类包含在行元素中以显示填充。
|
| 居中列
通过在列中包含类
small-centric，您可以使列位于居中。
|
| Source Ordering
Source ordering 类用于在断点之间移动列。
|
| Block Grids
Block-grid 用于分割内容。
|
| 基本网格和描述 |
| 变量
使用sass变量我们可以修改这个组件的默认样式。
|
| Mixins
最终的 CSS 输出是使用 mixin 构建的。
|
