JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='grid'>
	<li class='cell'></li>
	<li class='cell'></li>
	<li class='cell'></li>
	<li class='cell'></li>
	<li class='cell'></li>
	<li class='cell'></li>
</ul>

CSS

#grid{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
    align-content: flex-start;
	flex-wrap: wrap;
	height: 350px;
	width: 350px;
	list-style: none;
}
.cell:nth-child(odd){
	background: green;
}
.cell:nth-child(even){
	background: blue;
}
.cell{
	flex-basis: 25%;
	flex-grow: 1;
	flex-shrink: 1;
	height: 33%;
    border: 1px solid black;
}