csscss-selectorscss-grid

Alternating rows using css grids and nth-child


I am working on a product grid with an alternating row pattern like this.
enter image description here 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 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>

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!


Solution

  • 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 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>