How To Create Holy Grail Layout With CSS Grid

Let’s create holy grail layout with css grid.

HTML

<div class="container">
  <header>HEADER</header>
  <aside>ASIDE</aside>
  <main>MAIN</main>
  <footer>FOOTER</footer>
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif
}

.container {
    width: 98%;
    height: 100vh;
    margin: 0 auto;
    display: grid;
}

header {
    font-size: 38px;
    background-color: #83caff;
    display: flex;
    align-items: center;
    justify-content: center;
}

aside {
    font-size: 28px;
    background-color: #cc99cc;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    font-size: 32px;
    background-color: #ffcccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer {
    font-size: 28px;
    background-color: #83caff;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(min-width: 768px) {
    .container {
        grid-template-areas:
            "h h h h h h h h"
            "a a m m m m m m"
            "a a m m m m m m"
            "a a m m m m m m"
            "a a m m m m m m"
            "a a m m m m m m"
            "f f f f f f f f";
    }

    header {
        grid-area: h;
    }

    aside {
        grid-area: a;
    }

    main {
        grid-area: m
    }

    footer {
        grid-area: f;
    }
}