The Grid

优质

小牛编辑

127浏览

2023-12-01

描述 (Description)

基础网格系统通过页面最多可扩展到12列。网格系统用于通过一系列容纳内容的行和列来创建页面布局。

网格选项

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

	小型设备电话（<640px）	中型设备平板电脑（> = 640px）	大型设备笔记本电脑和台式机（> = 1200px）
Grid behavior	Horizontal at all times	倒塌开始，水平在断点之上	倒塌开始，水平在断点之上
类前缀	.small-*	.medium-*	.large-*
Number of columns	12	12	12
Nestable	Yes	Yes	Yes
Offsets	Yes	Yes	Yes
列排序	Yes	Yes	Yes

基础网格的基本结构

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

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

首先，创建一个row类来创建水平的列组。
内容应放在列中，只有列可能是行的直接子项。
通过指定要跨越的十二个可用列的数量来创建网格列。例如，对于四个相等的列，我们将使用.large-3

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

Sr.No.	基本网格类和描述
1	Large large-*类用于大型设备。
2	Medium medium-*类用于中型设备。
3	Small small-* class用于小型设备。

高级网格

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

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

建筑语义

使用SASS mixins集合，生成网格CSS，用于构建自己的语义网格。有关更多信息，请单击此处

SASS参考 (SASS Reference)

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

Sr.No.	基本网格和描述
1	Variables 使用sass变量，我们可以修改此组件的默认样式。
2	Mixins 最终的CSS输出是使用mixin构建的。

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