grid之网格属性

网格容器中的属性：
display
grid-template（网格模板）：控制网格行数、列数（grid-template-rows、grid-template-columns）
gap：单元格之间的空隙
items：定义网格项之间的对齐
content:内容之间的对齐
grid-auto：自动生成的网格
这五个可以合并为：grid

1、display：grid | inline-gird | subgrid
subgrid：子网格继承父网格容器列、行 （所有浏览器不兼容）。
注意：当元素设置了网格布局，column，float，clear，vertical-align属性无效（flex一样）

2、grid-template：track-size | line-name
属性值：
轨道大小（track-size）:px%\fr
网格线名字（lilne-name）

2、grid-template-areas(网格区域)：
通过引用grid-area属性指定的网格区域的名称来定义网格模板。
. 为一个空表格单元，grid-area 用空格对应
格式为：
.container{
grid-template-areas:“header header header”
“main . sidebar”
“footer footer footer”
}
3、gap
grid-column-gap：列之间的间隙
grid-row-gap ：行之间的间隙
间隙在内容之间，表格外没有
grid-gap： //grid-gap可以写成gap，兼容两个都放上去

4、items：
水平方向：justify-items:start | end | center | stretch（内容宽度占满整个网格单元）; 设置的是网格项
竖直方向：align-items
简写：place-items：align-items justify-itmes

5、content
水平方向：justify-content:start | end | center | stretch（内容宽度占满整个网格单元）| space-around | space-between | space-evenly;
设置的是网格单元
竖直方向：align-content
简写：place-content：align-items justify-itmes

6、grid-auto
隐式网格轨道：隐式网格轨道在显式的定位超出指定网格范围的行或列时被创建。
grid-auto-flow：row，column，dense