JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="grid">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
    <div class="grid__item">3</div>
    <div class="grid__item">4</div>
</div>

CSS

.grid{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 50% 50%;
    border: 1px solid #000;
    box-sizing: border-box;
    height: 200px;
}

.grid__item{
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 15px;
}

.grid__item:nth-of-type(1){
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 3;
}

.grid__item:nth-of-type(2){
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.grid__item:nth-of-type(3){
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

.grid__item:nth-of-type(4){
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
}