使用CSS网格和nth-child交替行

Question

我正在制作一个具有交替行模式的产品网格，就像这样。
颜色容器代表我认为行应该看起来的样子。

基本上第一行有两个产品，第二行有一个产品，无限循环重复。我一直在尝试使用css网格+ nth child 来实现它，但似乎做不对。以下是我目前所拥有的：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 0;
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n+3) {
  grid-column: auto / span 2;
  background-color: #e2a7de;
}

/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}

<div class="container">
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
</div>

我的大脑无法理解如何结合网格和nth-child来创建这种布局。如果有其他建议来创建这个2-1-2的模式，我也很愿意尝试。谢谢！

- prujuno

Answer 1

您可以像下面这样简化代码：

.container {
  display: grid;
  grid-auto-columns: 1fr; /* all columns equal */
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n) {
  grid-column: span 2; /* span and create two columns*/
  background-color: #e2a7de;
}

/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}

<div class="container">
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
</div>

- Temani Afif

Answer 2

将grid-template-columns更新为1fr 1fr

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0;
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n+3) {
  grid-column: auto / span 2;
  background-color: #e2a7de;
}


/*just for debugging*/
.container{grid-gap: 5px;}.item {background-color: #ffa900;padding: 10px;text-align: center;}

<div class="container">
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
</div>

- Juan