JSFiddle - React, Tailwind, and code Playground

by Imabot

HTML

<script src="https://fonts.googleapis.com/css2?family=Righteous&amp;display=swap"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gajraj+One&family=Monoton&family=Righteous&display=swap" rel="stylesheet">

<div id="container">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>	
	<div class="child">4</div>	
	
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>	
	<div class="child">8</div>	
	
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>	
	<div class="child">12</div>	
</div>

CSS

#container {
	background-color: LightSteelBlue;	
	
	width: 100%;
	height: fit-content;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between; 
	/*justify-content: stretch;*/
}

.child {
	font-family: 'Monoton', cursive;
	
	color: white;
	font-size: 40px;
	display : flex;
  	align-items : center;
	justify-content: center;
	
	width: 100px;
	height: 100px;
	margin: 10px;
	background-color: SteelBlue;
	
	border: 1px solid black;
	flex-grow: 1;
}

#container::after {
	/*background-color: red;*/
    content: "";    
    flex-grow: 100;
}