在 CSS 网格中重复两行模式

Question

我想模仿这种模式（一遍又一遍）：

所以我写grid-template-columns: 65% 35%了第一行。然而，我想 grid-template-columns: 65% 35%对第二行（以及第四行、第六行等）执行此操作，但我不确定如何在保持65%和 的同时做到这一点35%。

#parent {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-gap: 24px;
}

.child {
  height: 50px;
  background-color: #DDD;
}

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

Answer 1

您可以依靠nth-child选择器来执行此操作。请注意该模式如何重复每 4 个元素。

#parent {
  display: grid;
  grid-template-columns: 35% 1fr 35%;
  grid-gap: 24px;
}

.child {
  height: 150px;
  background-color: #DDD;
}
.child:nth-child(4n+1),
.child:nth-child(4n+4){
  grid-column:span 2;
}

<div id="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

您也可以执行相同的操作，仅考虑fr单位。结果不会完全相同fr，也%不会以相同的方式解决。

#parent {
  display: grid;
  grid-template-columns: 3.5fr 3fr 3.5fr;  /* 3.5 + 3.5 + 3 = 10*/
  grid-gap: 24px;
}

.child {
  height: 150px;
  background-color: #DDD;
}
.child:nth-child(4n+1),
.child:nth-child(4n+4){
  grid-column:span 2;
}

<div id="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