grid布局实现知乎首页布局样式

利用grid布局模拟知乎首页样式，相比传统float或者flex确实高效许多，语法细节可以参考MDN或者其他文档，本文只阐述实现过程。
知乎首页如下

知乎首页

页面分为三部分，顶部header，中部main，右侧aside。
html结构如下

  

    
header
  
  
main
  
aside

设置网格如下：

网格布局

分为两行四列，其中，header占据第一行，main占据第二行第二列，aside占据第二行第三列。
css样式设置如下

*{
  margin:0;
  padding:0;
}

body{
  background:#f6f6f6;
  height:100vh;
  display:grid;
  grid:50px auto / 1fr 590px 200px 1fr;
  grid-gap: 10px;
}

header{
  background: #fff;
  grid-column: 1 / 5;
  grid-row: 1;
  
  display: grid;
  grid: auto / 1fr 800px 1fr;
}

header .warp{
  background: gray;
  grid-column: 2;
  grid-row: 1;
}

main{
  background: #fff;
  grid-column: 2;
  grid-row:2;
  height: 500px;
}

aside{
  background: #fff;
  grid-column: 3;
  grid-row: 2;
  height: 400px;
}

由于header中，所有内容都处于main+aside的宽度内，所以header内部需要再分割，分为三份，中间部分为内容填充wrap的div，宽度与main+aside相当。，其中warp处于第二列中。
实现样式如下

样式demo