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 网格结构:

  <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-num 及 large-num 类。

• 注意：列的数量 num 加起来必须等于 12。

• 实例

  <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 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。

• 实例

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

• 实例

  <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 包裹整个容器，并指定需要的背景颜色:

• 实例

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

  <div class="small-3 columns">....</div>
  <div class="small-9 columns">....</div>

• 以下实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):

• 实例

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

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

• 实例

  <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% 宽度):

• 实例

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

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

• 实例

  <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-4、large-8 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 33% / 66%。但在中型或小型设备上会水平堆叠 (100% 宽度):

• 实例

  <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 用于指定均分是数量：

• 实例

  <div class="row">
      <ul class="small-block-grid-3">
          <li><img src="https://demo.qianchia.com/media/image/demo/demo11.png" alt="New York" width="400" height="300" /></li>
          <li><img src="https://demo.qianchia.com/media/image/demo/demo12.png" alt="Paris" width="400" height="300" /></li>
          <li><img src="https://demo.qianchia.com/media/image/demo/demo13.png" alt="San Francisco" width="400" height="300" /></li>
      </ul>
  </div>

• 效果 🔗

  

5.1 均分段落

• 实例

  <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 不同尺寸屏幕显示不同数量

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

• 实例

  <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/demo/demo10.png" alt="New York" width="400" height="300" /></li>
          <li><img src="https://demo.qianchia.com/media/image/demo/demo11.png" alt="New York" width="400" height="300" /></li>
          <li><img src="https://demo.qianchia.com/media/image/demo/demo12.png" alt="Paris" width="400" height="300" /></li>
          <li><img src="https://demo.qianchia.com/media/image/demo/demo13.png" alt="San Francisco" width="400" height="300" /></li>
      </ul>
  </div>

• 效果 🔗

       

6、修改列的顺序

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

• 实例

  <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、嵌套列

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

• 实例

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

• 实例

  <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-*) 类设置列向右移。左侧外边距的列数量使用 * 号控制:

• 实例

  <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 类用于设置最后一列的元素向左边浮动:

• 实例

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

• 效果 🔗