JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
        <div class="container">
            <div class="item" id="item-1">1</div>
            <div class="item" id="item-2">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
            <div class="item">11</div>
            <div class="item">12</div>
            <div class="item">13</div>
            <div class="item">14</div>
            <div class="item">15</div>
            <div class="item">16</div>
            <div class="item">17</div>
            <div class="item">18</div>
            <div class="item">19</div>
            <div class="item">20</div>
        </div>
    </div>
</body>
</html>

CSS

.wrapper{
    width: 100%;
    margin: 0 auto;
    background: #000;
}

.container{
    display: grid;
    grid-template-columns: repeat(5, 19%);
    grid-template-rows: repeat(5, 19%);
    grid-column-gap: 1%;
}
.container .item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #FFF;
    border: 1px solid #000;
}

#item-1{
    grid-column-start: 3;
    grid-column-end: 5;
    background: #FF0004;
}
#item-2{
    grid-column-start: 1;
    grid-column-end: 3;
    background: #0034FF;
}