grid布局

• grid-area：命名用的
• grid-template-areas：最关键的属性，规划空间，这里的header，nav，footer就是上面grid-area起的名字

grid-template-areas: 
  "header header header"
  "nav main aside"
  "footer footer footer";

• grid-template-rows: 6rem 1fr 6rem;：高度分配
• grid-template-columns: 20rem 1fr 20rem;：宽度分配
• grid-gap: 10rem;：每一块之间的距离