JSFiddle - React, Tailwind, and code Playground

by fest1val

HTML

<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSS

.wrapper {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 500px;
}

.item {
width: 30%;
height: auto;
background: red;
margin-right: 16px;
margin-bottom: 16px;
}

.item:nth-child(3n) {
  margin-right: 0;
}