Foundation 的网格系统是一个灵活的 12 列布局，旨在帮助开发者快速构建响应式、多设备兼容的布局。

基本概念：

  • 行（Row）： 使用 .row 类定义一行。
  • 列（Column）： 在行内使用 .columns 类定义列，并通过添加如 .small-4、.medium-6、.large-3 等类来设置列的宽度。

示例：

<div class="row">
  <div class="columns small-12 medium-6 large-4">
    <!-- 内容 -->
  </div>
  <div class="columns small-12 medium-6 large-4">
    <!-- 内容 -->
  </div>
  <div class="columns small-12 medium-6 large-4">
    <!-- 内容 -->
  </div>
</div>

在上述示例中：

  • .small-12：在小屏幕设备上，列占据 12 列宽度，即 100% 宽度。
  • .medium-6：在中等屏幕设备上，列占据 6 列宽度，即 50% 宽度。
  • .large-4：在大屏幕设备上，列占据 4 列宽度，即 33.33% 宽度。

嵌套网格：

Foundation 的网格系统支持嵌套，允许在列内再创建行和列，以实现更复杂的布局。

示例：

<div class="row">
  <div class="columns small-6">
    <div class="row">
      <div class="columns small-6">
        <!-- 内容 -->
      </div>
      <div class="columns small-6">
        <!-- 内容 -->
      </div>
    </div>
  </div>
  <div class="columns small-6">
    <!-- 内容 -->
  </div>
</div>

注意事项：

  • 在使用网格系统时，确保每行的列宽度总和不超过 12。
  • Foundation 的网格系统是移动优先的，即默认样式适用于小屏幕设备，较大的屏幕设备需要通过媒体查询来调整布局。

有关更多信息和示例，请参阅 Foundation 官方文档中的网格部分。 citeturn0search1