Foundation 网格实例
以下我们收集了一些网格常用的实例。
三个均等列
该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：
实例
<div class="row">
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:pink;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
</div>
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:pink;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
</div>
三个不均等列该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠：实例 div class="row" div class="medium-3 columns" style="background-color:yellow;" p.medium-3/p /div div class="medium-6 columns" style="background-color:pink;" p.medium-6/p /div div class="medium-3 columns" style="background-color:yellow;" p.medium-3/p /div/div
两个均等列
该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%：
实例
<div class="row">
<div class="small-6 columns" style="background-color:yellow;">
<p>.small-6</p>
</div>
<div class="small-6 columns" style="background-color:pink;">
<p>.small-6</p>
</div>
</div>
<div class="small-6 columns" style="background-color:yellow;">
<p>.small-6</p>
</div>
<div class="small-6 columns" style="background-color:pink;">
<p>.small-6</p>
</div>
</div>
两个不均等列该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%：实例 div class="row" div class="small-8 columns" style="background-color:yellow;" p.small-8/p /div div class="small-4 columns" style="background-color:pink;" p.small-4/p /div/div
修改列的顺序
通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序:
实例
<div class="row">
<div class="small-4 small-8-push columns" style="background-color:yellow;">
<p>.small-4 .small-8-push</p>
</div>
<div class="small-8 small-4-pull columns" style="background-color:pink;">
<p>.small-8 .small-4-pull</p>
</div>
</div>
<div class="small-4 small-8-push columns" style="background-color:yellow;">
<p>.small-4 .small-8-push</p>
</div>
<div class="small-8 small-4-pull columns" style="background-color:pink;">
<p>.small-8 .small-4-pull</p>
</div>
</div>
嵌套列你可以使用嵌套网格(列中插入列):实例 div class="row" div class="small-8 columns".small-8 div class="row" div class="small-8 columns".small-8 Nested div class="row" div class="small-8 columns".small-8 Nested Again/div div class="small-4 columns".small-4/div /div /div div class="small-4 columns".small-4/div /div /div div class="small-4 columns".small-4/div/div
混合：手机、桌面设备
Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活：
提示： 每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*。
实例
<div class="row">
<div class="small-6 large-8 columns">.small-6 .large-8</div>
<div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">
<div class="small-2 large-4 columns">.small-2 .large-2</div>
<div class="small-4 large-4 columns">.small-4 .large-2</div>
<div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">
<div class="small-3 large-5 columns">.small-3 .large-5</div>
<div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>
<div class="small-6 large-8 columns">.small-6 .large-8</div>
<div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">
<div class="small-2 large-4 columns">.small-2 .large-2</div>
<div class="small-4 large-4 columns">.small-4 .large-2</div>
<div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">
<div class="small-3 large-5 columns">.small-3 .large-5</div>
<div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>
混合：手机、平板和桌面设备实例 div class="row" div class="medium-6 large-8 columns".medium-6 .large-8/div div class="medium-6 large-4 columns".medium-6 .large-4/div/divdiv class="row" div class="small-4 medium-3 large-7 columns".small-4 .medium-3 .large-7/div div class="small-4 medium-6 large-3 columns".small-4 .medium-6 .large-3/div div class="small-4 medium-3 large-2 columns".small-4 .medium-3 .large-2/div/div
居中列
列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered 。
实例
<div class="row">
<div class="small-4 small-centered columns">small-4 small-centered</div>
</div>
<div class="row">
<div class="small-6 small-centered columns">small-6 small-centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">
<div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
<div class="small-10 small-centered columns">small-10 small-centered</div>
</div>
<div class="small-4 small-centered columns">small-4 small-centered</div>
</div>
<div class="row">
<div class="small-6 small-centered columns">small-6 small-centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">
<div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
<div class="small-10 small-centered columns">small-10 small-centered</div>
</div>
列偏移量可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:实例 div class="row" div class="large-1 columns"1/div div class="large-11 columns"11/div/divdiv class="row" div class="large-1 columns"1/div div class="large-10 large-offset-1 columns"10, offset 1/div/divdiv class="row" div class="large-1 columns"1/div div class="large-9 large-offset-2 columns"9, offset 2/div/divdiv class="row" div class="large-1 columns"1/div div class="large-8 large-offset-3 columns"8, offset 3/div/div
不完整列
如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。
可选项 .end 类用于设置最后一列的元素向左边浮动:
实例
<div class="row">
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns end">.medium-3 .end</div>
</div>
宽屏网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width:实例 style.row { max-width: 100%;}/style<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns end">.medium-3 .end</div>
</div>
如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用 .row 类，并指定你需要的背景颜色:
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat