分布
grid-template-columns 列分布
grid-template-rows 行分布
minmax() 最小，最大值
repeact() 重复写值
间距
gap (行间距，列间距) 组合
row-gap 行间距
columns 列间距
对齐
justify-items & align-items & place-items
网格中的单元格内元素位置
place-items （justify-items，align-items）组合
justify-items 水平位置
align-items 垂直位置
参数：start 起始位置 end 结束位置 ccenter 居中 stretch 拉伸
justify-content & align-content & place-content
place-content: (justify-content align-content)
justify-content: 水平位置
align-content: 垂直位置
参数：start: 初始排列 end:末尾排列 center:居中排列
space-between:行与列四周容器边框对齐，与容器边框紧贴，不留间距
space-around:行与列向四周容器边框对齐，四周留有间距
space-evenly:行和列，都均匀排列，每个元素之间，包括与容器边框的间距，都相等
stretch:项目大小没有指定时，拉伸占据整个网格容器
控制网格的排列顺序
grid-auto-flow 参数 row column row dense column dense
项目属性
项目排列的顺序
order
修改元素占几分
grid-area
grid-area: row-start/ column-start / row-end / column-end
grid-column-start
grid-column-end
grid-row-start
grid-row-end
更改单元格位置
grid-column grid-row
设置单元格内项目位置
place-self (justify-self,align-self)
justify-self 水平
align-self 垂直
参数 start 起始位置 end 结束位置 ccenter 居中 stretch 拉
