完成效果：
<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>
<style>
.grid-container{
width: 300px;
height: 300px;
/* 先把最外层的定义成一个网格容器，相当于说这个我要一个带格子的抽屉 */
display:grid;
/* 这个是说这个抽屉竖着有几个格子，就是有几行 60px（第一个格子高度这么大） 1fr（两头格子高度都是60px，省下的大小都给这个中间的格子，中间这个叫自适应大小） 60px（竖着第三个格子的高度）*/
grid-template-rows:60px 1fr 60px;
/* 这个抽屉横着有几个格子就是几列 ，第一个格子的宽度60px,第二列自适应大小*/
grid-template-columns: 60px 1fr;
/* 分了三行，两列。我们分别对每一个格子起名字。横着来 */
grid-template-areas: "header header" "nav main" "footer footer";
/*设置格子与格子之间的空隙 */
grid-gap: 5px;
}
header{
grid-area: header;
background: #336699;
background-clip: content-box;
}
nav{
grid-area: nav;
background: #0066ff;
background-clip: content-box;
}
main{
grid-area: main;
background: #ff6699;
background-clip: content-box;
}
footer{
grid-area:footer;
grid-column: span 2;
background: #339999;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="grid-container">
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</div>
</body>
</html>
