Foundation 网格系统
Foundation 网格系统为 12 列。
如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。
Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。
网格列
Foundation 网格系统有三个列：
.small (手机端)
.medium (平板设备)
.large (电脑设备：笔记本，台式机)
以上类可以结合使用，创建更灵活的布局
基本的网格结构
以下是基本的 Foundation 网格结构实例:
实例
...
首先，创建一行 (
)。 这是一个水平的垂直列。然后添加列的数量说明 small-num, medium-num 及 large-num 类。注意：列的数量 num 加起来必须等于 12 :
实例
实例
.small-12 yellow
.small-8 beige
.small-4 gray
.small-8 .large-9 pink
.small-4 .large-3 orange
尝试一下 »
实例中，第一行的
类为 .small-12, 这会创建 12 列（100%宽度）。
第二行创建了两个列， .small-4 的宽度为33.3% ，.small-8 的宽度为 66.6%。
第三行我们添加了额外的两个列 (.large-3 和 .large-9)。这意味着如果在大屏幕尺寸下，列就会变为 25% (.large-3) 和 75% (.large-9)的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8) 。这种组合的方式对于不同屏幕显示效果是非常有帮助的。
