<div class='container'>
  <div class='tile'></div>
  <div class='tile'></div>
  <div class='tile'></div>
  <div class='tile'></div>
  <div class='tile'></div>
  <div class='tile'></div>
  <div class='tile'></div>
  <div class='tile'></div>
</div>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tile {
  background-image: url(https://i.mycdn.me/i?r=AyEEjNrmxSDHlzM8JxmgKLLZ2hKX-mTHVrbYKBWOz8Aftw);
  background-position: center;
  background-size: cover;

  width: 32%;
  margin-bottom: 2%;
  &:last-child:nth-child(3n+2) {
    margin-right: 34%;
  }
  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.