JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="main">
        <div><span>div 1</span></div>
        <div><span>div 2</span></div>
        <div><span>div 3</span></div>
        <div><span>div 4</span></div>
        <div><span>div 5</span></div>
        <div><span>div 6</span></div>
        <div><span>div 7</span></div>
        <div><span>div 8</span></div>
        <div><span>div 9</span></div>
        <div><span>div 10</span></div>
        <div><span>div 11</span></div>
    </div>
</div>

CSS

#wrap {
    width: 100%;
    overflow: hidden;
}
#main {
    display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: calc(100% + 5px);
    padding-bottom: 5px;
    background-color: lightblue;
}
#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex: auto;
	flex: auto;
    min-width: 33.33%;
    max-width: 33.33%;
    border: 5px solid transparent;
    border-left: 0;
    border-bottom: 0;
}
#main div > span {
    display: block;
    width: 100%;
    min-height: 50px;
    background-color: #eaeaea;
}