填补CSS网格布局中的空白

Question

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

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

<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行。这意味着我最终会在网格中留下空白：

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

Answer 1

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

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

请参阅：https://jsfiddle.net/s2yqfgjh/