Alternating rows using css grids and nth-child-CodePudding

I am working on a product grid with an alternating row pattern like this.
The color containers represent what I think the rows should look like.

Basically there are two products on the first row, and one product on the second row, repeating infinitely. I've been trying to do it with css grids nth child, but I can't seem to get it right. Here's what I have so far:

.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 >
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
</div>

My brain can't wrap around combining grids and nth-child to create this layout. I'm also open to a better way of creating this 2-1-2 pattern if anyone has other suggestions. Thank you!

CodePudding user response：

You can simplify your code like below:

.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 >
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
</div>

CodePudding user response：

Update the grid-template-columns to be 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 >
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
  <div >
    X
  </div>
</div>