前言

---

在写了两篇grid语法后，突发奇想，直接想验证写body来解决整个网页布局的想法，嘻嘻

直接肝 ，拿一个知乎的网页

然后想这样分区。

1. 准备html

我是这样写的，然后main和aside里面还有内容模块。

2.分格子，放items

卧槽，这也太无脑了。

3. 布局main和aside里的子子元素

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:white;
}

.container {
  display:grid;
  height:100vh;
  border:1px solid red;
  grid-template-columns: 1fr 500px 200px 1fr;
  grid-template-rows: 50px auto;
  grid-template-areas:
    "header header header header"
    ".      main   sidebar ."
}

.header {
  background:red;
  grid-area:header;
  
}

.main {
  background:green;
   grid-area:main;
   display:grid;
 
}

.main >div{
  border:1px solid;
}

.sidebar {
  background:blue;
  grid-area:sidebar;
  align-self:start;
}

.sidebar >div{
  border:1px solid;
  height:15vh;
}

一句话。真无脑。完。