html grid 布局,grid布局

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 ：设置每行高度

单位：绝对单位，也可以使用百分比。可以自适应

item排列顺序：

grid-auto-flow ：row(默认，先行后列)column(先列后行)

每个网格内部的对齐方式(写在容器里面)：

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

所有item作为一个整体

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

item占的网格数：

grid-column-start 属性，

grid-column-end 属性，

grid-row-start 属性，

grid-row-end 属性

设置单元格内容对齐方式，(写在每个item里面)

.item {

justify-self: start | end | center | stretch;

align-self: start | end | center | stretch;

}