Question

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

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

我尝试添加grid-auto-flow: dense，但是它没有按照正确的顺序放置图像。

下面是代码：

.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>

这是codepen链接：My Grid Example

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

如何获得不正确的订单并正确显示？

Answer 1

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

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

如何在CSS的3X3网格中跨第6个元素的整行？

1 个答案: