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

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

文章图片
知乎首页
页面分为三部分，顶部header，中部main，右侧aside。
html结构如下

headermain 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; }

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