如何在 Foundation 中构建嵌套的照片网格？答案

【问题标题】：How can I build a nested grid of photos in Foundation?如何在 Foundation 中构建嵌套的照片网格？
【发布时间】：2017-01-07 03:26:20
【问题描述】：

JSFiddle：https://jsfiddle.net/s0m142c4/

我正在尝试使用基金会的网格来构建照片网格。

我希望它看起来像这样，所有块都代表照片。：

正如基金会的文档所建议的那样，我将两列嵌套在一列中，第三列只包含它的图像。

HTML：

           <div class="row grid-row">
            <div class="large-6 columns">
                <div class="row">
                    <div class="large-12 columns grid-img port">
                        <img src="img/tile1-new.jpg" />
                    </div>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="row">
                    <div class="large-4 columns grid-img land">
                        <img src="img/tile7.jpg" />
                    </div>
                    <div class="large-4 columns grid-img land">
                        <img src="img/tile3.jpg" />

                    </div>
                </div>
                <div class="row">
                    <div class="large-4 columns grid-img">
                        <img src="img/tile7.jpg" />
                    </div>
                    <div class="large-4 columns grid-img">
                        <img src="img/tile3.jpg" />

                    </div>
                </div>
            </div>
          </div>

CSS：

.grid-img{
    text-align: center;
}

.grid-img img{
    min-width:90%;
}

.grid-img.port img{
    min-width:100%;
}

.grid-row{
    height:600px;
}

但结果却是这样的：

知道如何让图像填充它们的嵌套列并像我的示例一样维护填充网格吗？

【问题讨论】：

在行容器内使用large-6 而不是large-4，因为它们每个应该占据一半宽度。但是，您的图像比它们的高更宽，因此您必须切换到背景图像或使用某种遮罩来让它们切换并保持纵横比。除非您能够硬编码行的最小高度，否则可能还必须为您的列使用等高插件。

标签： html css zurb-foundation

【解决方案1】：

这非常接近，您需要为图像使用 100% 的宽度，然后将 large-4 列更改为 large-6，因为它们永远不会占用它们需要做的 50%。

您现在可以调整下边距以使布局工作得更好一点。有一个非常令人讨厌的方法是 Masonry.js 或 Isotope.js，它可以调整容器的大小，但是对于 html 和 css 可以做得很好的事情可能有点笨拙。见下文：

/*.grid-img {
  text-align: center;
}
.grid-img img {
  min-width: 90%;
}
.grid-img.port img {
  min-width: 100%;
}
.grid-row {
  height: 600px;
}
*/

.grid-img img {
  width: 100%;
  margin-bottom: 2em;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.css" rel="stylesheet" />
<div class="row grid-row">
  <div class="large-6 columns">
    <div class="row">
      <div class="large-12 columns grid-img port">
        <img src="http://placehold.it/600x600" />
      </div>
    </div>
  </div>
  <div class="large-6 columns">
    <div class="row">
      <div class="large-6 columns grid-img land">
        <img src="http://placehold.it/600x600" />
      </div>
      <div class="large-6 columns grid-img land">
        <img src="http://placehold.it/600x600" />

      </div>
    </div>
    <div class="row">
      <div class="large-6 columns grid-img">
        <img src="http://placehold.it/600x600" />
      </div>
      <div class="large-6 columns grid-img">
        <img src="http://placehold.it/600x600" />
      </div>
    </div>
  </div>
</div>

【讨论】：