css之grid网格布局属性

经过一段时间的理解，原来grid布局是网格线布局即容器布置网格线空间，项目进行填充
补充display：inline-grid

grid-area：grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname规定网格项目的项目（两种书写方式，在单个网格里进行项目命名）
grid-row-start 规定从哪一行开始显示项目
grid-column-start 规定从哪一列开始显示项目
grid-column-end 指定在哪条列线停止显示项目，或跨越多少列
grid-row-end 规定在哪条行线停止显示项目，或跨越多少行
grid-gap:grid-row-gap(现在row-gap) grid-column-gap(现在column-gap)
grid-row-gap(现在row-gap)行间距
grid-column-gap(现在column-gap)列间距
grid-template ：grid-template-rows grid-template-column
grid-template-columns 规定列尺寸 值为repeat（auto-fill，px|fr）minmax(100px,1fr)
grid-template-rows 规定列尺寸，使用规则同上
justify/align/place-items/content
item相对于网格的对齐方式（stretch伸展拉长、start、center、end）place-items为justify和align的简写
content为所有项目的对齐方式
grid-auto-rows/column 多出来项目的情况下对于多余项目的尺寸进行设置
grid-auto-flow 控制自动放置的项目如何插入网格中 dense值代表填充网格中的任何孔
grid-template-areas 设置区域

grid-column: grid-column-start / grid-column-end

容器属性
grid-template
grid-gap
grid-template-areas
grid-auto-flow
justify/align/place-items/content
grid-auto-rows/column

项目属性
grid-column-start|end 、grid-row-start |end
grid-column、grid-row
grid-area
justify-self 、align-self
place-self

补充：使用grid布局写了一个盒子居中效果
css：
div{
display: grid;
height: 100%;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
span{
background: red;
border: 1px double green;
grid-column: 2/3;
grid-row: 2/3;
}
html：