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处于第二列中。
实现样式如下
文章图片
样式demo
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM