DONT ADD ANYTHING HERE!

header

main

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore tempora totam temporibus sint. Consequatur, laborum nisi necessitatibus deserunt ad recusandae voluptas maiores molestiae eveniet tenetur, facere quisquam quidem quia rerum!

Code

css

    .mygrid-container {
        display: grid;
        gap: 0.2em;
        grid-template-rows: auto auto 1fr auto;
        background: var(--dark-purple);
    }

    .mygrid-container>header,
    .mygrid-container>nav,
    .mygrid-container>main,
    .mygrid-container>footer {
        background: lightgoldenrodyellow;
    }

    .mygrid-container>main>p {
        padding: 0 10px;
    }

    ul {
        list-style-type: circle;
    }

    @media (min-width: 40em) {
        .mygrid-container {
            grid-template-columns: 10em 1fr;
            grid-template-rows: auto 1fr auto;
            background-color: lightgray;
        }

        .mygrid-container>header {
            grid-column: span 2;
            display: grid;
            justify-content: center;
            align-items: center;
        }

        .mygrid-container>nav {
            grid-row: span 2;
        }

        .mygrid-container>header,
        .mygrid-container>main>header,
        .mygrid-container>nav>header,
        .mygrid-container>footer>header {
            display: grid;
            justify-content: center;
            align-items: center;
        }

    }

html

    <div class="mygrid-container">

        <header>
            <h1>header</h1>
        </header>
        <nav>
            <header>
                <h2>nav</h2>
            </header>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </nav>
        <main>
            <header>
                <h2>main</h2>
            </header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore tempora totam
                temporibus sint. Consequatur,
                laborum
                nisi necessitatibus deserunt ad recusandae voluptas maiores molestiae eveniet
                tenetur, facere quisquam quidem quia
                rerum!
            </p>
        </main>
        <footer>
            <header>
                <h2>footer</h2>
            </header>
        </footer>

    </div>

References

You Tube: Build a Classic Layout FAST in CSS Grid (Mozilla Developer Miriam Suzanne)

MDN: CSS Grid layout