grid布局问题

主要记录和解释grid属性，不做解释

父级display:reid属性

属性	值	说明
display	gird,inline-gird,subgird	定义父级容器，继承父级容器
grid-template-columns	px,fr,%,auto,em ~ ~	用来定义网格的列
grid-template-rows	px,fr,%,auto,em ~ ~	用来定义网格的行
grid-template-areas	grid-area	通过引用 grid-area 属性名称来定义网格模板。
grid-column-gap	px,fr,%,auto,em ~ ~	指定网格线(grid lines)列的大小。
grid-row-gap	px,fr,%,auto,em ~ ~	指定网格线(grid lines)行的大小。
grid-gap	px,fr,%,auto,em ~ ~	指定网格线行/列的大小的缩写
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-flow	row、column、dense	告诉自动布局算法依次填充每行或者每列、告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺

子级items属性

属性	值	说明
grid-column-start	name/number/auto	行开始网格线
grid-column-end	name/number/auto	行结束网格线
grid-row-start	name/number/auto	列开始网格线
grid-row-end	name/number/auto	列开始网格线
grid-area	name	命名模板名称
justify-self	start、end、center、stretch	左对齐、右对齐、左右居中、填充
align-self	start、end、center、stretch	上对齐、下对齐、上下居中、填充