html - 在 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