css - 使用未知数量的元素重复网格布局

Question

我正在处理一组元素并尝试使用 css 的网格来定位它们。我的问题是我将它们与 nth-child 放在一起，所以在前 6 个之后它就坏了。我希望能够拥有无限数量的物品，并且它们都会正确放置自己。基本上布局应该在前 6 个元素之后重复。

.wrapper {
    display: grid;
    grid-template-columns: calc(50% - 4px) calc(50% - 4px);
    grid-template-rows: 120px 120px 120px 240px;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
}

.item {
  background: #bada55;
}

.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
}
.item:nth-child(2) {
  grid-row-start: 1;
  grid-row-end: 2;

}
.item:nth-child(3) {
  grid-row-start: 2;
  grid-row-end: 3;
}

.item:nth-child(4) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}

<div class="wrapper">
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
</div>

Answer 1

就像下面这样:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* fr instead of % */
  grid-auto-rows: 120px 120px 120px 240px; /* auto-rows instead of template-rows */
  grid-auto-flow: dense; /* fill all the space */
  gap: 8px;
}

.item {
  background: #bada55;
}

.item:nth-child(6n + 1) {
  grid-row: span 2; /* I will take 2 rows */
}

.item:nth-child(6n + 4) {
  grid-column: 1/-1; /* I will take all the columns  */
}

<div class="wrapper">
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
  <a class="item">
    Item
  </a>
</div>