JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="row">
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
</div>
<div class="row">
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
</div>
<div class="row">
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
	<div class="child"> content </div>
</div>
</div>
try scrolling horizontally --&gt;

CSS

.row{
	display: inline-flex;
	background-color:#fcc;
  background-size:cover;
}
.row:nth-child(odd){
  background-color:#fbb;
}
.child{
	min-width:150px;
	border:1px #ccc solid;
	flex-grow:1;
}