使用第 n 个子元素在网格中形成更大的方块

Answer 1

我会尝试这个：

.child:nth-child(6n+2),
.child:nth-child(6n+4) { }

.parent {
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 410px;
}

.child {
  background-color: #000;
  width: 200px;
  height: 100px;
}

.child:nth-child(6n+2),
.child:nth-child(6n+4) {
  grid-row: span 2;
  width: 200px;
  height: 210px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>  
</div>

这只是制定模式，然后制定如何选择它们的问题：

2,4 … 8, 10 … 14, 16 … 20, 22 … 26, 28 …