Foundation 网格实例

三个均等列

该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：

 
 
.medium-4
 
 
 
.medium-4
 
 
 
.medium-4
 
 

三个不均等列

该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠：

 
 
.medium-3
 
 
 
.medium-6
 
 
 
.medium-3
 
 

两个均等列

该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%：

 
 
.small-6
 
 
 
.small-6
 
 

两个不均等列

该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%：

 
 
.small-8
 
 
 
.small-4
 
 

修改列的顺序

通过使用.small|medium|large-push-*和.small|medium|large-pull-*类来修改列的顺序:

 
 
.small-4 .small-8-push
 
 
 
.small-8 .small-4-pull
 
 

嵌套列

你可以使用嵌套网格(列中插入列):

 
.small-8 
 
.small-8 Nested 
 
.small-8 Nested Again
 
.small-4
 
 
 
.small-4
 
 
 
.small-4
 

混合：手机、桌面设备

Foundation 网格系统有三个列:.small-*(手机),.medium-*(平板), 和.large-*(桌面设备)。这些类可以动态组合使用，让布局更加灵活：

提示：每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定.small-*。

 
.small-6 .large-8
 
.small-6 .large-4
 
 
 
.small-2 .large-2
 
.small-4 .large-2
 
.small-6 .large-2
 
 
 
.small-3 .large-5
 
.small-9 .large-7
 

混合：手机、平板和桌面设备

 
.medium-6 .large-8
 
.medium-6 .large-4
 
 
 
.small-4 .medium-3 .large-7
 
.small-4 .medium-6 .large-3
 
.small-4 .medium-3 .large-2
 

居中列

列居中可以使用.small-centered类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered。

 
small-4 small-centered
 
 
 
small-6 small-centered
 
 
 
small-6 large-centered
 
 
 
small-8 small-centered large-uncentered
 
 
 
small-10 small-centered
 

列偏移量

可以使用.large-offset-*(或.small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:

 
1
 
11
 
 
 
1
 
10, offset 1
 
 
 
1
 
9, offset 2
 
 
 
1
 
8, offset 3
 

不完整列

如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。

可选项.end类用于设置最后一列的元素向左边浮动:

 
.medium-3
 
.medium-3
 
.medium-3
 
 
 
.medium-3
 
.medium-3
 
.medium-3 .end
 

宽屏

网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width:

如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用.row类，并指定你需要的背景颜色:

 
 
.small-6
 
.small-6