JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

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

CSS

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;    
    padding-top: calc((100% - 1000px)/6);
    padding-left:calc((100% - 1000px)/6);}
.block {
    font-size:20px;
    width: 200px;
    height: 200px;
    background: #4381B6;
    display:inline-block;
    margin-right: calc((100% - 1000px)/5);
    margin-bottom: calc((100% - 1000px)/5);
}

@media screen and (max-width: 400px) {
    .block {
        margin: calc(50% - 100px);
    }
}

@media screen and (min-width: 401px) and (max-width: 600px) {
    #container{
        padding-top: calc((100% - 400px)/3);
        padding-left:calc((100% - 400px)/3);
    }
    .block {
        margin-right: calc((100% - 400px)/2);
        margin-bottom: calc((100% - 400px)/2);
    }
}
@media screen and (min-width: 601px) and (max-width: 800px) {
    #container{
        padding-top: calc((100% - 600px)/4);
        padding-left:calc((100% - 600px)/4);
    }
    .block {
        margin-right: calc((100% - 600px)/3);
        margin-bottom: calc((100% - 600px)/3);
    }
}
@media screen and (min-width: 801px) and (max-width: 1000px) {
    #container{
        padding-top: calc((100% - 800px)/5);
        padding-left:calc((100% - 800px)/5);
    }
    .block {
        margin-right: calc((100% - 800px)/4);
        margin-bottom: calc((100% - 800px)/4);
    }
}