JSFiddle - React, Tailwind, and code Playground

by Bacco

HTML

<div class = "container">
    <div class = "box a">1</div>
    <div class = "box b">2</div>
    <div class = "box c">3</div>
    <div class = "box a">4</div>
    <div class = "box b">5</div>
    <div class = "box c">6</div>
    <div class = "box a">7</div>
    <div class = "box b">8</div>
    <div class = "box c">9</div>
</div>

CSS

.container {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
    	width:80%;
        background-color: #ccc;
        margin: 0 auto;
    }

.box {
        min-width:100px;
        max-width:150px;
        min-height:30px;
        flex-grow: 1;
    }

/* os estilos a seguir tem finalidade meramente estética para o fiddle */

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

body, html {padding: 0; margin: 0; height:100%; width: 100%;
    font-family: sans-serif}