JSFiddle - React, Tailwind, and code Playground

by isogunro

HTML

<div id="mainGrid">
    <div>1</div>    
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>    
</div>

CSS

#mainGrid {
    display:grid;
    grid-columns: 150px 150px 150px 150px;
    grid-rows: 75px 75px;
}

#mainGrid > div:nth-child(1) {
    grid-column:1;
    grid-row:1;
    background-color:blue;
}

#mainGrid > div:nth-child(2) {
    grid-column:2;
    grid-row:1;
    background-color:aqua;
}

#mainGrid > div:nth-child(3) {
    grid-column:3;
    grid-row:1;
    background-color:red;
}
#mainGrid > div:nth-child(4) {
    grid-column:4;
    grid-row:1;
    background-color:green;
}
#mainGrid > div:nth-child(5) {
    grid-column:1;
    grid-row:2;
    background-color:magenta;
}
#mainGrid > div:nth-child(6) {
    grid-column:2;
    grid-row:2;
    background-color:yellow;
}
#mainGrid > div:nth-child(7) {
    grid-column:4;
    grid-row:2;
    background-color:orange;
}
#mainGrid > div:nth-child(8) {
    grid-column:3;
    grid-row:1;
    background-color:olive;
}