基础 - 网格

描述

Foundation 网格系统通过页面扩展到 12 列。网格系统用于通过一系列包含内容的行和列来创建页面布局。

网格选项

下表简要说明了 Foundation 网格系统在多种设备中的工作原理。

	小型设备手机（<640px）	中型设备平板电脑（>=640px）	大型设备笔记本电脑和台式机（>=1200px）
网格行为	始终水平排列	开始时折叠，在断点以上水平排列	开始时折叠，在断点以上水平排列
类前缀	.small-*	.medium-*	.large-*
列数	12	12	12
可嵌套	是	是	是
偏移	是	是	是
列排序	是	是	是

Foundation 网格的基本结构

以下是 Foundation 网格的基本结构：

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

首先，创建一个 row 类来创建列的水平组。
内容应放置在列内，并且只有列可以是行的直接子元素。
网格列是通过指定您希望跨越的 12 个可用列中的数量来创建的。例如，对于四个相等的列，我们将使用 .large-3

以下是 Foundation 网格系统中使用的三个类：

序号	基本网格类和描述
1	大型 large-* 类用于大型设备。
2	中型 medium-* 类用于中型设备。
3	小型 small-* 类用于小型设备。

高级网格

以下是 Foundation 中使用的高级网格格式。

序号	高级网格和描述
1	组合列/行 column 和 row 类用于同一元素，以获取全宽列用作容器。
2	嵌套我们可以在另一个列内嵌套网格列。
3	偏移使用 large-offset-* 或 small-offset-* 类，您可以将列向右移动。
4	不完整行当行不包含多达 12 列时，Foundation 会自动将最后一个元素浮动到右侧。
5	折叠/展开行使用媒体查询大小，将折叠和展开类包含到行元素中以显示填充。
6	居中列通过在列中包含 small-centered 类，您可以使列位于中心。
7	源排序源排序类用于在断点之间切换列。
8	块网格块网格用于分割内容。

语义构建

使用一组 SASS 混合宏，会生成一个网格 CSS，用于构建您自己的语义网格。更多信息，点击此处

SASS 参考

以下是 Foundation 中使用的网格的 SASS 参考。

序号	基本网格和描述
1	变量使用 Sass 变量，我们可以修改此组件的默认样式。
2	混合宏最终的 CSS 输出是使用混合宏构建的。

打印页面

序号	高级网格和描述
1	组合列/行 column 和 row 类用于同一元素，以获取全宽列用作容器。
2	嵌套我们可以在另一个列内嵌套网格列。
3	偏移使用 large-offset-* 或 small-offset-* 类，您可以将列向右移动。
4	不完整行当行不包含多达 12 列时，Foundation 会自动将最后一个元素浮动到右侧。
5	折叠/展开行使用媒体查询大小，将折叠和展开类包含到行元素中以显示填充。
6	居中列通过在列中包含 small-centered 类，您可以使列位于中心。
7	源排序源排序类用于在断点之间切换列。
8	块网格块网格用于分割内容。