填补CSS网格布局中的空白[重复]答案

【问题标题】：Fill in gaps in CSS grid layout [duplicate]填补CSS网格布局中的空白[重复]
【发布时间】：2019-04-30 13:09:33
【问题描述】：

我正在尝试实现网格布局以匹配此线框：

到目前为止，我有以下标记：

<div class="grid">
  <div class="spanWidth">
    <img src="https://loremflickr.com/290/130?random=1" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=2" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/180?random=3" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=4" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=5" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/180?random=6" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=7" />
  </div>
</div>

使用 CSS：

.grid {
  display: grid;
  grid-gap: 10px;
}

.spanWidth {
  grid-column: 1 / span 2;
}

我遇到的问题是不规则大小的图像不符合“行”布局。它们占用 1.25 行。这意味着我最终会在网格中出现空白：

我可以在这里做些什么来匹配线框吗？

【问题讨论】：

可能会有所帮助：medium.com/@andybarefoot/…
您需要允许一些 div 跨越几行，然后通过 object-fit 进行一些剪辑可能 finalyze 。 @ 987654324@ spanning 需要知道哪个是假设的，如果你不知道，那么砌体 javascript 将完成这项工作，css 无法猜测哪个是 span :( 如果图像始终在此，则链接的 codepen 可能是答案以这些平均尺寸/比率订购）。

标签： css css-grid

【解决方案1】：

您可以将width 和height 设置为100%，然后用object-fit: cover 重新调整纵横比，如下所示：

.grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

见：https://jsfiddle.net/s2yqfgjh/

【讨论】：