Question

grid布局

Answer 1

grid布局，阮一峰写的非常详细。
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
我就不献丑了。
我就大致总结一下
缺点：相对于display：flex兼容性不好，不兼容于ie内核；这个制约了它的使用；不过它的思想非常好，如果改进了兼容性这个问题。完全可以替代flex布局

display: grid 指定一个容器采用网格布局。

grid是设置容器的每列/每行的宽度/高度，划分成网格，排列item
grid-template-columns ：设置每列宽度
grid-template-rows ：设置每行高度
单位：绝对单位，也可以使用百分比。可以自适应

grid-auto-flow ：row（默认，先行后列）column（先列后行）

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}