Foundation - 网格
描述
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 类来创建水平列组。
内容应放置在列内，并且只有列可以是行的直接子级。
通过指定要跨越的十二个可用列数来创建网格列。例如，对于四个相等的列，我们将使用 .large-3
以下是 Foundation 网格系统中使用的三个类 −
高级网格
以下是 Foundation 中使用的高级网格格式。
| Sr.No. | 高级网格和描述 |
|---|---|
| 1 | 组合列/行
column 和 row 类用于同一元素，以获取用作容器的全宽列。 |
| 2 | 嵌套
我们可以将网格列嵌套在另一个列中。 |
| 3 | 偏移
使用 large-offset-* 或small-offset-* 类，您可以将列移到右侧。 |
| 4 | 不完整的行
当行不包含最多 12 列时，Foundation 会自动将最后一个元素向右浮动。 |
| 5 | 折叠/展开行
使用媒体查询大小，将折叠和展开类包含在行元素中以显示填充。 |
| 6 | 居中列
通过在列中包含类 small-centered，您可以将列置于中心。 |
| 7 | 源排序
源排序类用于在断点之间移动列。 |
| 8 | 块网格
块网格用于分割内容。 |
语义构建
使用SASS mixins 会生成一个网格 CSS，用于构建您自己的语义网格。有关更多信息，请单击此处
SASS 参考
以下是 Foundation 中使用的网格的 SASS 参考。
