Foundation-网格

Foundation是一个非常实用的前端框架，它的网格系统尤为出色，能够帮助开发者快速构建响应式布局。网格系统是指将页面分为若干列和行，类似于Excel表格，通过设定列和行的比例、宽度、偏移量等属性，实现对页面元素的多样化布局。

1. 基本用法

Foundation的网格系统是以12为总数来划分的，这意味着一个行内元素最多可以分为12份。我们可以通过添加class名来使用网格布局。

• .row：包含数个列（columns），必须在.col前套用；
• .col：用来设置元素的列宽度，可以设置不同的宽度。如：.col-6表示占6份（即1/2），.col-4表示占4份（即1/3），.col-3表示占3份（即1/4）。

<div class="row">
  <div class="col-6">占1/2</div>
  <div class="col-6">占1/2</div>
</div>
<div class="row">
  <div class="col-4">占1/3</div>
  <div class="col-4">占1/3</div>
  <div class="col-4">占1/3</div>
</div>
<div class="row">
  <div class="col-3">占1/4</div>
  <div class="col-3">占1/4</div>
  <div class="col-3">占1/4</div>
  <div class="col-3">占1/4</div>
</div>

2. 栅格偏移

除了基本列宽之外，Foundation还提供了栅格偏移的功能，可以使列不紧贴父元素，贴近其他列，这样布局就变得更加灵活。

<div class="row">
  <div class="col-3">1</div>
  <div class="col-3 col-offset-3">2</div>
</div>
<div class="row">
  <div class="col-4">1</div>
  <div class="col-4 col-offset-4">2</div>
</div>

3. 响应式布局

随着移动设备的广泛使用，响应式布局（响应式设计）成为了必不可少的一部分，而Foundation的网格系统也提供了对响应式布局的支持。在网格的class名中添加“medium”、“large”等前缀，就可以针对不同屏幕尺寸设置不同的布局方式。

• .small：手机设备（小于768px）；
• .medium：平板电脑（>=768px && < 1024px）；
• .large：大型显示器（>=1024px）。

<div class="row">
  <div class="col-small-6 col-medium-4 col-large-3">1</div>
  <div class="col-small-6 col-medium-4 col-medium-offset-4 col-large-3 col-large-offset-6">2</div>
</div>

4. 嵌套布局

有时我们需要在某一列中嵌套更多的行和列，Foundation的网格系统同样支持嵌套布局。只需要在父元素的class名中添加“row”即可。

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">1</div>
      <div class="col-6">2</div>
    </div>
  </div>
  <div class="col-6">
    <div class="row">
      <div class="col-6">3</div>
      <div class="col-6">4</div>
    </div>
  </div>
</div>

总结

Foundation的网格系统提供了非常灵活和强大的布局功能，可以根据不同情况和需求，实现多样化的布局方式。它的代码也非常简单，只需要添加一些class名就能实现网格布局。因此，如果你想快速构建响应式布局，Foundation是值得一试的前端框架。