JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<body>
    <div class="parent-wrapper">
        <div class="parent">
            <div class="s1of4"></div>
            <div class="s1of4"></div>
            <div class="s1of4"></div>
            <div class="s1of4"></div>
            <div class="s2of3"></div>
            <div class="s1of3"></div>
            
            <div class="s1of3"></div>
            <div class="s1of3"></div>
            <div class="s1of3"></div>

        </div>
    </div>
</body>

CSS

.parent {
    display: flex;
    flex-wrap:wrap;
    margin:-10px 0 0 -10px;
}
.s1of4 {
    background:blue;
    margin:10px 0 0 10px;
    height:100px;    
    width: calc(100% * (1/4) - 10px - 0px)
}
.s2of3 {
    background:blue;
    margin:10px 0 0 10px;
    height:100px;    
    width: calc(100% * (2/3) - 10px - 0px)
}
.s1of3 {
    background:blue;
    margin:10px 0 0 10px;
    height:100px;    
    width: calc(100% * (1/3) - 10px - 0px)
}
@media screen and (max-width : 900px){
.s1of4 {width: calc(100% * (1/2) - 10px - 0px)}
}

@media screen and (max-width : 600px){
.s1of4 {width: calc(100% * (1) - 10px - 0px)}
}