<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.