grid-template-areas

If you want to specify a particular area in the grid you can use the grid-template-areas. This grid-template-areas property is very useful when you build the page layout of a web page.

<style>
    ._container {
        width: 50%;
        display: grid;
        grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
        border: 2px solid #ccc;
        padding: 10px 10px;
    }

    ._header {
        grid-area: header;
        border: 1px solid #0a0a0a;
        background-color: #F7941F;
    }

    ._main {
        grid-area: main;
        border: 1px solid #0a0a0a;
        background-color: #F7941F;
        height: 500px;
    }

    ._sidebar {
        grid-area: sidebar;
        border: 1px solid #0a0a0a;
        background-color: #F7941F;
        height: 500px;
    }

    ._footer {
        grid-area: footer;
        border: 1px solid #0a0a0a;
        background-color: #F7941F;
    }

</style>
<div style="margin:25px 0" class="_container">
    <div class="_header">Header</div>
    <div class="_main">Main</div>
    <div class="_sidebar">Sidebar</div>
    <div class="_footer">Footer</div>
</div>