DONT ADD ANYTHING HERE!

Positioning with grid-template-areas

My Header
My Article
My footer

Code

css 
    .mygrid-container>header,
    .mygrid-container>article,
    .mygrid-container>aside,
    .mygrid-container>footer {
        border-radius: 5px;
        padding: 10px;
        background-color: var(--background-color);
        border: 2px solid var(--border-color);
    }

    .mygrid-container {
        font: 0.9em/1.2 Arial, Helvetica, sans-serif;
        display: grid;
        grid-template-areas: "header header" 
                             "sidebar content" 
                             "footer footer";
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }

    header {
        grid-area: header
    }

    article {
        grid-area: content;
    }

    aside {
        grid-area: sidebar;
    }

    footer {
        grid-area: footer;
    }

    header,
    article,
    aside,
    footer {
        display: grid;
        justify-content: center;
        align-items: center;
    }
html 
    <div class="mygrid-container">
        <header>My Header</header>
        <article>My Article</article>
        <aside>My Aside</aside>
        <footer>My footer</footer>
    </div>

Notes

Essence

//CSS
    .grid-container {
      display: grid;
      grid-template-areas: "header header header" "aside article article";
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }

    header {
      grid-area: header;
    }

    aside {
      grid-area: aside;
    }

    article {
      grid-area: article;
    }
    
// HTML
    <div class="grid-container">

        <header>My Header</header>
        <aside>My Aside</aside>
        <article>My Article</article>

    </div>

References

MDN: CSS Grid layout