javascript - 具有固定大小列的响应式网格

Question

我是 Foundation Framework 的新手，刚开始使用它。我正在使用 Foundation Grid 创建响应式设计。

我创建了具有 2x4(行、列)网格的桌面布局网格。

<div class="row">
<div class="large-12 columns">
  <div class="row">

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

<!-- End Thumbnails -->

  </div>     
</div>

现在，我想要的是平板电脑的两列布局和移动设备的一列布局。默认情况下，网格会调整列的大小以填充空白区域，但我想要固定大小的列。

我能想到的一个解决方案是使用 javascript 根据 @media 查询更新 DOM 层次结构。但我想要一个更好的解决方案，如果可能的话使用 CSS。

我们将不胜感激。

Answer 1

如果您使用的是 Foundation 4.3+，您可以下载一个额外的样式表来启用 medium grid除了您当前使用的小型和大型。虽然此功能在技术上被列为实验性功能，但它将在 11 月 21 日发布的 Foundation 5 中成为标准。