Foundation 网格系统

前言

  • Foundation 网格系统为 12 列。如果不需要 12 列,可以合并一些列,创建一些更大宽度的列。






    1 1 1 1 1 1 1 1 1 1 1 1
    4 4 4
    4 8
    6 6
    12
  • Foundation 的网格系统是响应式的。列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上,可能是三列,小屏幕尺寸就可能是三个单列,按顺序排列。

1、网格类

  • Foundation 网格系统有三个列:

    • .small (手机端)
    • .medium (平板设备)
    • .large (电脑设备:笔记本,台式机)

2、基本的网格结构

  • 以下是基本的 Foundation 网格结构:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="row">
    <div class="small | medium | large -num columns"></div>
    </div>

    <div class="row">
    <div class="small | medium | large -num columns"></div>
    <div class="small | medium | large -num columns"></div>
    <div class="small | medium | large -num columns"></div>
    </div>

    <div class="row">
    ...
    </div>
  • 首先,创建一行 (<div class="row">)。这是一个水平的垂直列。

  • 然后添加列的数量说明 small-num,medium-numlarge-num 类。
  • 注意:列的数量 num 加起来必须等于 12。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="row">
    <div class="small-12 columns" style="background-color: yellow;">.small-12</div>
    </div>

    <div class="row">
    <div class="small-8 columns" style="background-color: beige;">.small-8</div>
    <div class="small-4 columns" style="background-color: gray;">.small-4</div>
    </div>

    <div class="row">
    <div class="small-8 large-9 columns" style="background-color: pink;">.small-8 .large-9</div>
    <div class="small-4 large-3 columns" style="background-color: orange;">.small-4 .large-3</div>
    </div>
  • 效果 🔗

  • 解析

    • 实例中,第一行的 <div> 类为 .small-12, 这会创建 12 列(100% 宽度)。
    • 第二行创建了两个列,.small-4 的宽度为 33.3%,.small-8 的宽度为 66.6%。
    • 第三行添加了额外的两个列 (.large-3.large-9)。这意味着如果在大屏幕尺寸下,列就会变为 25% (.large-3) 和 75% (.large-9) 的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8)。这种组合的方式对于不同屏幕显示效果是非常有帮助的。

2.1 水平堆叠

  • 以下实例创建了一个基本的网格系统,在 PC 和平板设备上它是水平平铺的,在手机等小型设备上它是水平堆叠的。

  • 实例

    1
    2
    3
    4
    <div class="row">
    <div class="medium-6 columns" style="background-color: yellow;">Qian Chia 工作室</div>
    <div class="medium-6 columns" style="background-color: pink;">Qian Chia 工作室</div>
    </div>
  • 效果 🔗

      

3、宽屏

  • 默认情况下,网格最大 (.row) 宽度为 62.5rem。在宽屏上,当宽度大于 62.5rem, 列不会跨越页面的宽度,即使宽度设定为 100%。但可以通过 CSS 重新设置 max-width:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="row">
    <p>基本行 (max-width: 62.5rem;):</p>
    <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>
    <br>

    <div class="row example">
    <p>行的 max-width 为 100%:</p>
    <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>

    <style>
    .example {
    max-width: 100%;
    }
    </style>
  • 效果 🔗

3.1 使用容器包裹

  • 如果使用默认的 max-width, 但希望背景颜色跨越整个页面宽度,可以使用 .row 包裹整个容器,并指定需要的背景颜色:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="row" style="background-color: tomato; padding: 25px;">
    <p>基本行 (max-width: 62.5rem;):</p>
    <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>
    <br>

    <div class="container" style="background-color:coral;padding:25px;">
    <div class="row">
    <p>Row with container:</p>
    <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>
  • 效果 🔗

4、网格选项

  • 下表总结了 Foundation 网格系统在多个设备上的说明:
网格选项 小型设备
Phones (<40.0625em (640px))
中型设备
Tablets (>=40.0625em (640px))
大型设备
Laptops & Desktops
(>=64.0625em (1025px))
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
类前缀 .small-* .medium-* .large-*
类的数量 12 12 12
可内嵌 Yes Yes Yes
偏移量 Yes Yes Yes
列排序 Yes Yes Yes

4.1 小型设备

  • 小型设备的定义是屏幕小于 40.0625em,使用 .small-* 类。

  • 假设在小型设备上有一个简单的网格布局,两列,宽度比例为 25% 和 75%。

    1
    2
    <div class="small-3 columns">....</div>
    <div class="small-9 columns">....</div>
  • 以下实例设置了两个列,比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明,在大型设备上会继承 .small 类的代码):

  • 实例

    1
    2
    3
    4
    <div class="row">
    <div class="small-3 columns" style="background-color: yellow;">Qian Chia</div>
    <div class="small-9 columns" style="background-color: pink;">Qian Chia</div>
    </div>
  • 效果 🔗

4.2 中型设备

  • 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间,使用 .medium-* 类。

  • 在中型设备上推荐的比例为 50% / 50%。

    1
    2
    <div class="small-3 medium-6 columns">....</div>
    <div class="small-9 medium-6 columns">....</div>
  • 以上实例设置了两个列,比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明,在大型设备上会继承 .small 类的代码):

  • 小型设备上使用的比例为 25%/75% (.small-3.small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6.medium-6) 。

  • 实例

    1
    2
    3
    4
    <div class="row">
    <div class="small-3 medium-6 columns" style="background-color: yellow;">Qian Chia</div>
    <div class="small-9 medium-6 columns" style="background-color: pink;">Qian Chia</div>
    </div>
  • 效果 🔗

      

4.2.1 仅在中型设备上使用

  • 以下实例中指定了 .medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度):

  • 实例

    1
    2
    3
    4
    <div class="row">
    <div class="medium-6 columns" style="background-color: yellow;">Qian Chia</div>
    <div class="medium-6 columns" style="background-color: pink;">Qian Chia</div>
    </div>
  • 效果 🔗

      

4.3 大型设备

  • 大型设备的屏幕尺寸定义大于 64.0625em,使用 .large-* 类。

  • 在大型设备上推荐的比例为 33% / 66%。

    1
    2
    <div class="small-3 medium-6 large-4 columns">....</div>
    <div class="small-9 medium-6 large-8 columns">....</div>
  • 小型设备两个列的比例为 25% / 75% (.small-3.small-9)

  • 中型设备两个列的比例为 50% / 50% (.medium-6.medium-6)
  • 大型设备两个列的比例为 33% / 66% (.large-4.large-8)

  • 实例

    1
    2
    3
    4
    <div class="row">
    <div class="small-3 medium-6 large-4 columns" style="background-color: yellow;">Qian Chia</div>
    <div class="small-9 medium-6 large-8 columns" style="background-color: pink;">Qian Chia</div>
    </div>
  • 效果 🔗

         

4.3.1 仅在大型设备上使用

  • 以下实例中我们指定了 .large-4large-8 类 (不是 .medium-*.small-*)。这表明在大型设备上比例为 33% / 66%。但在中型或小型设备上会水平堆叠 (100% 宽度):

  • 实例

    1
    2
    3
    4
    <div class="row">
    <div class="large-4 columns" style="background-color: yellow;">Qian Chia</div>
    <div class="large-8 columns" style="background-color: pink;">Qian Chia</div>
    </div>
  • 效果 🔗

         

5、块状网格

  • 块状网格用于均分页面内容:例如一行内要显示四张图片,不管什么屏幕下都需要均分宽度。

  • 可以使用 <ul> 元素加上 .small | medium | large -block-grid-num 类来创建块状网格。num 用于指定均分是数量:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <div class="row">
    <ul class="small-block-grid-3">
    <li><img src="https://demo.qianchia.com/media/image/demo11.png" alt="New York" width="400" height="300" /></li>
    <li><img src="https://demo.qianchia.com/media/image/demo12.png" alt="Paris" width="400" height="300" /></li>
    <li><img src="https://demo.qianchia.com/media/image/demo13.png" alt="San Francisco" width="400" height="300" /></li>
    </ul>
    </div>
  • 效果 🔗

5.1 均分段落

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <div class="row">
    <ul class="small-block-grid-3">
    <li><p>Just a Simple Example Text...</p></li>
    <li><p>Just a Simple Example Text...</p></li>
    <li><p>Just a Simple Example Text...</p></li>
    </ul>
    </div>
  • 效果 🔗

5.2 不同尺寸屏幕显示不同数量

  • 通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="row">
    <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
    <li><img src="https://demo.qianchia.com/media/image/demo10.png" alt="New York" width="400" height="300" /></li>
    <li><img src="https://demo.qianchia.com/media/image/demo11.png" alt="New York" width="400" height="300" /></li>
    <li><img src="https://demo.qianchia.com/media/image/demo12.png" alt="Paris" width="400" height="300" /></li>
    <li><img src="https://demo.qianchia.com/media/image/demo13.png" alt="San Francisco" width="400" height="300" /></li>
    </ul>
    </div>
  • 效果 🔗

         

6、修改列的顺序

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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>

    <p>Switched:</p>
    <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>
  • 效果 🔗

7、嵌套列

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="row">
    <div class="small-8 columns" style="background-color: yellow;">.small-8
    <div class="row">
    <div class="small-8 columns" style="background-color: lightcyan;">.small-8 Nested
    <div class="row">
    <div class="small-8 columns" style="background-color: rgb(28, 62, 73);">.small-8 Nested Again</div>
    <div class="small-4 columns" style="background-color: lightgreen;">.small-4</div>
    </div>
    </div>

    <div class="small-4 columns" style="background-color: lightgray;">.small-4</div>
    </div>
    </div>

    <div class="small-4 columns" style="background-color: pink;">.small-4</div>
    </div>
  • 效果 🔗

8、居中列

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="row">
    <div class="small-4 small-centered columns" style="background-color: yellow;">small-4 small-centered</div>
    </div>
    <div class="row">
    <div class="small-6 small-centered columns" style="background-color: pink;">small-6 small-centered</div>
    </div>
    <div class="row">
    <div class="small-6 large-centered columns" style="background-color: lightgreen;">small-6 large-centered</div>
    </div>
    <div class="row">
    <div class="small-8 small-centered large-uncentered columns" style="background-color: yellow;">small-8
    small-centered large-uncentered</div>
    </div>
    <div class="row">
    <div class="small-10 small-centered columns" style="background-color: pink;">small-10 small-centered</div>
    </div>
  • 效果 🔗

9、列偏移量

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="row">
    <div class="large-1 columns" style="background-color: yellow;">1</div>
    <div class="large-11 columns" style="background-color: pink;">11</div>
    </div>
    <div class="row">
    <div class="large-1 columns" style="background-color: yellow;">1</div>
    <div class="large-10 large-offset-1 columns" style="background-color: pink;">10, offset 1</div>
    </div>
    <div class="row">
    <div class="large-1 columns" style="background-color: yellow;">1</div>
    <div class="large-9 large-offset-2 columns" style="background-color: pink;">9, offset 2</div>
    </div>
    <div class="row">
    <div class="large-1 columns" style="background-color: yellow;">1</div>
    <div class="large-8 large-offset-3 columns" style="background-color: pink;">8, offset 3</div>
    </div>
  • 效果 🔗

10、不完整列

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

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="row">
    <div class="medium-3 columns" style="background-color: yellow;">.medium-3</div>
    <div class="medium-3 columns" style="background-color: yellow;">.medium-3</div>
    <div class="medium-3 columns" style="background-color: yellow;">.medium-3</div>
    </div>

    <div class="row">
    <div class="medium-3 columns" style="background-color: pink;">.medium-3</div>
    <div class="medium-3 columns" style="background-color: pink;">.medium-3</div>
    <div class="medium-3 columns end" style="background-color: pink;">.medium-3 .end</div>
    </div>
  • 效果 🔗

文章目录
  1. 1. 前言
  2. 2. 1、网格类
  3. 3. 2、基本的网格结构
    1. 3.1. 2.1 水平堆叠
  4. 4. 3、宽屏
    1. 4.1. 3.1 使用容器包裹
  5. 5. 4、网格选项
    1. 5.1. 4.1 小型设备
    2. 5.2. 4.2 中型设备
      1. 5.2.1. 4.2.1 仅在中型设备上使用
    3. 5.3. 4.3 大型设备
      1. 5.3.1. 4.3.1 仅在大型设备上使用
  6. 6. 5、块状网格
    1. 6.1. 5.1 均分段落
    2. 6.2. 5.2 不同尺寸屏幕显示不同数量
  7. 7. 6、修改列的顺序
  8. 8. 7、嵌套列
  9. 9. 8、居中列
  10. 10. 9、列偏移量
  11. 11. 10、不完整列
隐藏目录