Grid布局

网格容器的属性

属性	值
display	grid 、inline-grid、subgrid
grid-template-columns
grid-template-rows
grid-template-areas
grid-column-gap	网格间距
grid-row-gap	网格间距
grid-gap	上面两者的简写
justify-items	start end center stretch
align-items	start end center stretch
justify-content	start end center stretch space-around space-between space-evenly( 网格项间隔相等)
align-content	start end center stretch space-around space-between space-evenly
grid-auto-columns(自动隐式生成网格轨道)
grid-auto-flow(类似于flex-direction)	row(m默认) column dense
grid	设置网格容器所有属性

网格项上的属性

属性	值
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column	3 / span 2; 相应缩写
grid-row	third-line / 4; 相应缩写
grid-area	定义网格项名字，以便创建模块
justify-self	start end center stretch;定义单个网格项垂直于列网格线的对齐方式。
align-self	start end center stretch；定义单个网格项垂直于行网格线的对齐方式

摘抄自_leonlee

时间有限，有时间会写得更详细，并加上与flex的比较