3 column grid layout, full screen-CodePudding

I am new to grid. I want it fullscreen, but, not sure. Also not sure, of why the navigator and sidebar appear as they appear.

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 2fr auto;
    grid-template-areas:
    "header header  header"
    "nav    article aside"
    "footer footer  footer";
    grid-column-gap: 8px;
    height: 100vh;
    width: 100%;
}

header, nav, footer, main, article, aside 
{
    display: block;
    width: 100%;
    height: 100%;
}

header {
    background-color: bisque;
    grid-area: header;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: side;
}

article {
    grid-area: article;
    background-color: aqua;
}

footer{
    background-color: beige;
    width: 100%;
    grid-area: footer;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
</head>

<body>
    <div  role="main">
        <header>{header}</header>
        <nav>{navigation}</nav>
        <article>
            <main>{main content}</main>
        </article>
        <aside>{sidebar}</aside>
        <footer>{footer}</footer>
    </div>
</body>

</html>

CodePudding user response：

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 2fr auto;
    grid-template-areas:
    "header header  header"
    "nav    article aside"
    "footer footer  footer";
    grid-column-gap: 8px;
    height: 100vh;
    width: 100%;
}

header, nav, footer, main, article, aside 
{
    display: block;
    width: 100%;
    height: 100%;
}

header {
    background-color: bisque;
    grid-area: header;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

article {
    grid-area: article;
    background-color: aqua;
}

footer{
    background-color: beige;
    width: 100%;
    grid-area: footer;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
</head>

<body>
    <div  role="main">
        <header>{header}</header>
        <nav>{navigation}</nav>
        <article>
            <main>{main content}</main>
        </article>
        <aside>{sidebar}</aside>
        <footer>{footer}</footer>
    </div>
</body>

</html>