1.定义网格
display: grid;
grid-template-rows: 200px 200px 200px; 行或 1fr 1fr 1fr fr是等分的意思
grid-template-columns: 200px 200px 200px; 列
简写grid-template：行/列 如grid-template：200px 200px 200px/200px 200px 200px；
2.移动网格：利用伪类:nth-child(n)
grid-area: 1/2/2/3 表示区域，前两个是行，后两个是列，表示交换前水平第二个格
在css里添加了
.box:nth-child(6) {
grid-area: 1/2/2/3;
}
6到了2的位置，其余顺序往下排，并不是交换
3.网格命名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>区域命名</title>
<style>
.contenter {
display: grid; /* 第二步，定义网格+ grid-template-areas*/
500px;
height: 800px;
grid-template-rows: 2fr 3fr 2fr;
grid-template-columns: 1fr 3fr 2fr;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
background-color: blue;
grid-gap: 5px;
}
header { /* 第三步，给每个区域添加css样式*/
grid-area: header;
background-color: red;
}
nav {
grid-area: nav;
background-color: pink;
}
main {
grid-area: main;
background-color: yellow;
}
aside {
grid-area: aside;
background-color: white;
}
footer {
grid-area: footer;
background-color: pink;
}
</style>
</head>
<body>
<div class="contenter"> <!-- 第一步，把名字以标签的形式写在div -->
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</div>
</body>
</html>