html - 为带有空格的 n 个元素重复 CSS 网格布局

Question

我想要一个在元素周围有很多空白(空单元格)的 CSS 网格。为此，我希望每个第 n + x 个元素都填充一个特定的位置，以便它们对齐得很漂亮。

一个例子它应该看起来像一天:

在我下面的代码示例中，我做了一个非常粗略的示例，它设置了三个不同的区域和一些空白，当我明确放置每个 .item 时，这些空白不应被填充。

https://codepen.io/they-are/pen/NZQGwr?editors=1100

我不希望对每个 (n) 个元素都这样做，而是对以下所有元素重复网格模式。因此第 1 和第 4、第 2 和第 5、第 3 和第 5 项具有相同的位置，但始终以 3n + 1 开始并以 3n + 3 结束。目前它只是覆盖它们自己。

Answer 1

您可以像这样有策略地将空填充项插入到网格 HTML 代码中:

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 11vw;
  grid-gap: 1vw;
}

.item {
}
.item:nth-of-type(3n+1) {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-end: span 2;
}
.item:nth-of-type(3n+2) {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-end: span 1;
}
.item:nth-of-type(3n+3) {
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.filler {
  border: 1px solid rgba(192, 192, 192, 0.15);
  background-color: rgba(192, 192, 192, 0.02);
}
.filler:before {
  content: 'filler';
  color: rgba(192, 192, 192, 0.5)
}
.filler:nth-of-type(n + 1) {
  grid-column-start: 1;
  grid-column-end: span 5;
}

<div class="grid">
  <div class="item">A</div>
  <span class="filler"></span>
  <div class="item">B</div>
  <div class="item">C</div>

  <div class="item">D</div>
  <span class="filler"></span>
  <div class="item">E</div>
  <div class="item">F</div>

  <div class="item">G</div>
  <span class="filler"></span>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

如果你使用边距和更大的行/列跨度，你可以在没有填充的情况下做到这一点:

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: calc(100vw / 9);
  grid-gap: 1vw;
}

.item {
  counter-increment: item;
}
.item:before {
  content: "#" counter(item);
}
.item:nth-of-type(3n+1) {
  overflow: auto;
  background-color: red;
  grid-column-start: 1;
  grid-column-end: span 2;
  /* this item should only span 2 rows, but the margin below 
   * calculates just to span one row plus the gap, so in the 
   * end it looks as if this item does not span 3 but 2 rows.
   */
  grid-row-end: span 3;
  margin-bottom: calc(100vw / 9 + 1vw);
}
.item:nth-of-type(3n+2) {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: span 4;
  grid-row-end: span 1;
}
.item:nth-of-type(3n+3) {
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.filler {
  border: 1px solid rgba(192, 192, 192, 0.15);
  background-color: rgba(192, 192, 192, 0.02);
}
.filler:nth-of-type(n + 1) {
  grid-column-start: 1;
  grid-column-end: span 5;
}

<div class="grid">
  <div class="item">A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>AA</div>
  <div class="item">B</div>
  <div class="item">C</div>

  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>

  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>