Code Self Study Forum

CSS Grid Generator

This CSS grid generator might be useful:
https://cssgrid-generator.netlify.com/

It looks like the output was sass. I converted it to CSS and made a small HTML page to test the output.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Grid</title>
        <style>
        .parent {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }
        .div1 { background-color: green;     grid-area: 1 / 1 / 4 / 3; }
        .div2 { background-color: blue;      grid-area: 1 / 3 / 2 / 4; }
        .div3 { background-color: yellow;    grid-area: 1 / 4 / 3 / 4; }
        .div4 { background-color: gray;      grid-area: 2 / 3 / 3 / 4; }
        .div5 { background-color: lightblue; grid-area: 3 / 3 / 4 / 5; }
        .div6 { background-color: teal;      grid-area: 4 / 1 / 6 / 4; }
        .div7 { background-color: purple;    grid-area: 5 / 4 / 6 / 5; }
        .div8 { background-color: orange;    grid-area: 4 / 4 / 5 / 5; }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="div2">2</div>
            <div class="div1">1</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
            <div class="div5">5</div>
            <div class="div6">6</div>
            <div class="div7">7</div>
            <div class="div8">8</div>
        </div>
    </body>
</html>