<div class="container">
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</div>我们需要使用
grid-area 属性来命名每个区域：
header
{
grid-area: header;
background-color: #9b59b6;
} nav
{
grid-area: nav;
background-color: #3498db;
}
main
{
grid-area: main;
background-color: #2ecc71;
}
aside
{
grid-area: aside;
background-color: #f1c40f;
}
footer
{
grid-area: footer;
background-color: #1abc9c;
}
现在我们将使用
属性来指定每个网格区域所占据的行和列。 以下是我们如何做到的：grid-template-areas
.container
{
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-gap: .75em;
}请注意，header 和 footer 单词重复三次。 这表明，header 和 footer 横跨 3 列的宽度。 你可以把它全部写在一行中，但是把每一行写在一个单独的行上很好，很干净。 你可以看到我在这里使用了一个新的属性
grid-gap 。 它所做的只是在两个网格区域之间添加一个间距。 你也可以使用
grid-row-gap 和
grid-column-gap 来为行和列指定不同的间距值。例子：
HTML
<div class="container">
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</div>CSS
.container
{
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-gap: .75em;
background-color: #eee;
width: 100vw;
height: 100vh;
}header
{
grid-area: header;
background-color: #9b59b6;
}
nav
{
grid-area: nav;
background-color: #3498db;
}
main
{
grid-area: main;
background-color: #2ecc71;
}
aside
{
grid-area: aside;
background-color: #f1c40f;
}
footer
{
