<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
.flex {
  border: 5px solid #1a73e8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: space-between;
  padding: 10px;
  width: 550px;
  height: 300px;
}

.flex > div {
  width: 100px;
  height: 100px;
}

.flex > div:nth-child(3n + 1) {
  background-color: #006bee;
}

.flex > div:nth-child(3n + 2) {
  background-color: #fca300;
}

.flex > div:nth-child(3n + 3) {
  background-color: #05a749;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.