Помогите сверстать страничку с использованием Grid Layout

Я сверстал вот такую страничку, требования к страничке были такие, использовать Grid Layout, футер чтоб прижимался к низу странички

<div class="wrapper">
    <header class="header">
        <div class="container">
            <h1>Header</h2>
        </div>
    </header>
    <nav class="nav">
        <h2>Navigation</h2>
    </nav>
    <main class="main-content">
        <h2>Main</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet temporibus inventore veniam molestiae itaque dicta fugit ab qui dignissimos voluptate. Dignissimos illum sit voluptatibus laudantium possimus omnis quaerat consequuntur animi.</p>
    </main>
    <aside class="related-links">
        <h2>Related&nbsplinks</h2>
    </aside>

    <footer class="footer">
        <div class="container">
            <p>Footer</p>
        </div>
    </footer>
</div>

CSS

 html {
    height: 100%;
}

body,
h1,
h2,
p {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
    display: grid;

}

.wrapper {
    display: grid;

    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        'header header header'
        'nav main-content related-links'
        'footer footer footer';
}


.header {
    background-color: rgb(42, 66, 221);
    color: #fff;
    text-align: center;
    padding: 30px 0;
    grid-area: header;
}

.nav {
    background-color: rgb(255, 145, 0);
    padding: 40px;
    grid-area: nav;
}

.main-content {
    padding: 40px;
    grid-area: main-content;
}

.main-content p {
    padding-top: 40px;
}

.related-links {
    background-color: rgb(115, 0, 223);
    padding: 40px;
    grid-area: related-links;

}

.footer {
    background-color: rgb(45, 116, 45);
    color: #fff;
    text-align: center;
    padding: 30px 0;
    font-size: 24px;
    grid-area: footer;
}

@media  screen and (max-width: 992px) {
    .wrapper {
        display: grid;
        grid-template-rows: auto auto 1fr auto auto;
        grid-template-areas:
            'header'
            'nav'
            'main-content'
            'related-links'
            'footer ';

    }
}

У меня получилась вот такая страничка Теперь требуется сверстать такую же страничку с использование Grid Layout и justify-content. Или куда по смыслу добавить эти свойства. Помогите пожалуйста не пойму как с этим свойством завязаться.