以下我们收集了一些网格常用的实例。
三个均等列该实例演示了如何创建三个均等列 (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:
.row {
max-width: 100%;
}
如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面,这时你在容器元素上使用 .row
类,并指定你需要的背景颜色:
.small-6
.small-6