<div class='container'>
  <div class='tile'>1</div>
  <div class='tile'>2</div>
  <div class='tile'>3</div>
  <div class='tile'>4</div>
  <div class='tile'>5</div>
  <div class='tile'>6</div>
  <div class='tile'>7</div>
  <div class='tile'>8</div>
</div>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tile {
  width: 32%;
  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  &:nth-child(2n) {
    background-color: Bisque;
  }
  &:nth-child(2n + 1) {
    background-color: PowderBlue;
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.