基金会 - 网格

描述

Foundation 网格系统在页面中最多可缩放 12 列。网格系统用于通过一系列容纳内容的行和列来创建页面布局。

网格选项

下表简要介绍了 Foundation 网格系统如何在多个设备中工作。

小型设备手机（<640px） 中型设备平板电脑(>=640px) 大型设备笔记本电脑和台式机（>=1200px）
网格Behave 始终水平 折叠开始，水平位于断点上方 折叠开始，水平位于断点上方
类前缀 。小的-* 。中等的-* 。大的-*
列数 12 12 12
可嵌套 是的 是的 是的
偏移量 是的 是的 是的
列排序 是的 是的 是的

基础网格的基本结构

以下是基础网格的基本结构 -

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

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

  • 首先，创建一个行类来创建水平列组。

  • 内容应放置在列内，并且只有列可以是行的直接子级。

  • 网格列是通过指定您希望跨越的十二个可用列的数量来创建的。例如，对于四个相等的列，我们将使用.large-3

以下是基础网格系统中使用的三个类 -

先生。 基本网格类和描述
1 大的

Large- *类用于大型设备。
2 中等的

medium- *类用于中型设备。
3 小的

Small-*类用于小型设备。

高级网格

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

先生。 高级网格和描述
1 组合列/行

列类和行类在同一元素上使用，以获得用作容器的全宽列。
2 嵌套

我们可以将网格列嵌套在另一列中。
3 偏移量

使用large-offset-*或small-offset-*类，您可以将列移动到右侧。
4 不完整的行

当行不包含最多 12 列时，Foundation 会自动将最后一个元素向右浮动。
5 折叠/展开行

使用媒体查询大小，将折叠和展开类包含到行元素中以显示填充。
6 居中的列

通过在列中包含小中心类，您可以使列位于中心。
7 来源订购

源排序类用于在断点之间移动列。
8 块网格

块网格用于分割内容。

语义构建

使用一组 SASS mixins，生成一个网格 CSS，用于构建您自己的语义网格。欲了解更多信息，请点击这里

SASS 参考

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

先生。 基本网格和描述
1 变量

使用 sass 变量我们可以修改该组件的默认样式。
2 混入

最终的 CSS 输出是使用 mixin 构建的。