Grid Test

by James Connolly

HTML

<div class="products-grid">
  <div class="product-card">Card 1</div>
  <div class="product-card">Card 2</div>
  <div class="product-card">Card 3</div>
  <div class="product-card">Card 4</div>
  <div class="product-card">Card 5
  </div>
  <div class="product-card">Card 6
  </div>
  <div class="product-card">Card 7
  </div>
  <div class="product-card">Card 8
  </div>
  <div class="product-card">Card 9
  </div>
</div>

SCSS

.products-grid {
  display: grid;
  grid-gap: 5px;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.product-card {
  padding: 30px;
  color: #fff;

  &:not(:first-of-type) {
    background: #fff;
    color: #333;
  }

  &:nth-child(1) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  &:nth-child(2) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
  }

  &:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  &:nth-child(4) {
    
  }
}




// demo styles only
body {
  background: #666;
}