css - 如何在 css 的 3X3 网格中跨越每 6 个元素整行？

Question

我正在设置一个 3 X N 的图像网格，需要有一个横幅横跨整个列的每 6,9 个位置。

但是在设置跨度时，我希望填充剩余的空白。

我尝试添加grid-auto-flow:密集，但它没有将图像按正确的顺序排列。

下面是代码:

.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: start;
  justify-items: center;
  margin: auto;
  width: 540px;
  }
.grid img {
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
  max-width: 100%;
}
.grid img:nth-child(6) {
  grid-column: span 3;
  }

<main class="grid">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1555181937-efe4e074a301?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
</main>

这是代码笔链接:My Grid Example

我想要一个图像网格，其中每行只填充第 6,9 个...跨列的图像。我不想在两者之间留有空格。目前，我在第五个元素中出现了空白。

如何获得错误的顺序并正确显示？

Answer 1

只需更改您的选择器，如下所示:.grid img:nth-child(7n + 7) {

它将选择每个 7n + 7，因为结果前 6 个元素将是行中的 3 个，下一个元素将占用 100% 的空间