Foundation 常见网格 - 学习 Foundation 5

本章我们列出了一些常见的网格应用

三个均等列

下面的代码创建三个均等列 (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>

运行范例 »

三个不均等列

下面的代码创建三个不均等列 (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>

运行范例 »

两个不均等列

下面的代码创建两个不均等列 ( 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>

运行范例 »

嵌套列

Foundation 允许网格嵌套网格，即在列中插入列

<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="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>
</div>
<div 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>

运行范例 »

列偏移量

.large-offset-* 或 .small-offset-* CSS 类可以设置列向右移

左侧外边距的列数量使用 * 号控制

<div class="row">
    <div class="large-1 columns">1</div>  
    <div class="large-11 columns">11</div>
</div>
<div class="row">
    <div class="large-1 columns">1</div>
    <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
    <div class="large-1 columns">1</div>
    <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div 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 CSS 类用于设置最后一列的元素向左边浮动

<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>

运行范例 »

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

<div style="background-color:coral;padding:25px;">
    <div class="row">
        <div class="small-6 columns" style="background-color:yellow;">.small-6</div>    
        <div class="small-6 columns" style="background-color:pink;">.small-6</div>  
    </div>
</div>

运行范例 »