利用grid布局模拟知乎首页样式，相比传统float或者flex确实高效许多，语法细节可以参考MDN或者其他文档，本文只阐述实现过程。
知乎首页如下
知乎首页
页面分为三部分，顶部header，中部main，右侧aside。
html结构如下
<body>
<header>
<div class="warp">header</div>
</header>
<main>main</main>
<aside>aside</aside>
</body>
设置网格如下：
网格布局
分为两行四列，其中，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
网友评论