CSS Repeating Grid items.

by Rodwyn Moreno

HTML

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>

SCSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(3, 75px);
}

.item {
  padding: 12px 8px;
  text-align: center;
  
  &:nth-child(1) {
    background: #ffe6e6;
  }
  
  &:nth-child(2) {
    background: #ffcccc;
  }
  
  &:nth-child(3) {
    background: #ffb3b3;
  }
  &:nth-child(4) {
    background: #ff9999;
  }
  
  &:nth-child(5) {
    background: #ff8080;
  }
  
  &:nth-child(6) {
    background: #ff6666;
  }
}