网格简单入门

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>