Foundation 块状网格学习笔记

Foundation 提供了一套简单易用、强大灵活的块状网格系统，可以很方便地实现各种不同大小和布局的网格化页面。

布局类

下面是常用的布局类：

• .grid-container：最外层容器，包含所有 .grid-x 或 .grid-y 子元素；
• .grid-x：横向网格容器，包含多个列，也就是 .cell 子元素；
• .grid-y：纵向网格容器，包含多个行，也就是 .cell 子元素；
• .cell：网格单元格，默认宽度为自适应，高度为内容的高度。可以使用 small-*、medium-*、large-* 分别定义在不同屏幕大小下的网格宽度。

实例

下面我们通过一个例子来演示 Foundation 块状网格的使用。

HTML：

htmlCopy Code
<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="cell small-6 medium-4 large-2">
      <img src="https://via.placeholder.com/200x200" alt="placeholder">
    </div>
    <div class="cell small-6 medium-8 large-10">
      <h1>Foundation 块状网格</h1>
      <p>这是一个简单的示例。</p>
    </div>
  </div>
  <div class="grid-x grid-padding-x">
    <div class="cell small-12 medium-6 large-4">
      <h2>左侧内容</h2>
      <p>这里是左侧的内容。</p>
    </div>
    <div class="cell small-12 medium-6 large-8">
      <h2>右侧内容</h2>
      <p>这里是右侧的内容。</p>
    </div>
  </div>
</div>

效果：

在上面的例子中，我们使用了 .grid-container 容器包含了两个 .grid-x 容器，其中第一个 .grid-x 容器包含了一个宽度为 2 的大列和一个宽度为 4 的中列，而第二个 .grid-x 容器则包含了一个宽度为 4 的大列和一个宽度为 8 的中列。

通过使用 Foundation 块状网格系统，我们可以非常方便地实现各种不同布局的页面。