gap 

grid-columns-gap/grid-row-gap

指定网格线的大小，可以想像为设置列/行之间的间距的宽度

.container{

grid-columns-gap:<line-sezi>;

grid-row-gap:<line-size>;

}

.container{

grid-template-rows:[row1-start] 25px [row1-end row2-start] 25px [row2-end];

grid-template-columns:auto 50px auto;

grid-template-areas:"header header header"

"footer footer footer";

}

.comtainer{

grid-template:

[row1-start] "header header header " 25px [row1-end]

[row2-start] "footer footer footer " 25px [row2-end]

/auto 50px auto;

}

none :将三个属性都设置未其初始值

subgrid:吧grid-template-rows和grid-template-columns设置未subgrid，并且grid-template-areas设置未初始值

grid-template-rows/grid-template-columns:吧grid-template-columns和grid-template-rows设置未指定值，与此同时，设置grid-template-areas 问none

在单个声明中定义grid-templates-rows , grid-template-columns,grid-template-area

.container{

grid-template:none | subgrid | <grid-template-rows>/<grid-template-columns>

}

.container{

frid-template-areas:none|

"grid-area-name|.grid-area-nam|.grid-area-nam|. ..."

"grid-area-nam|.grid-area-name|.grid-area-nam|. ..."

"...."

}

.container{

display:grid;

grid-template-columns:1fr 1fr 1fr 1fr 1fr;

grid-template-rows:auto auto auto;

}

container{

display:grid;

grid-template-columns:40px  50px auto 50px 40px;

grid-template-rows:25% 100px auto;

}

justify-content:设置网格容器的网格沿着行轴（水平）对齐网格的对齐方式,，即网格与容器的对齐方式。

justify-content : start | end | center | stretch | space-around | space-betwwen | space-evenly

align-content : start | end | center | stretch | space-around | space-betwwen | space-evenly

space-content : start end  //先列后行 start--列属性值，end---行属性值。

start：网格与网格容器左端  /  顶部对齐

end：网格与网格容器右端  /  底部对齐

center：网格与网格容器的水平  /  垂直中间位置

stretch：调整grid item的大小，让宽度填充整网格个容器

space-around：在grid item之间设置均等宽度的空白间隙，其边缘间隙大小为中间空白间隙宽度的一半

space-between：在grid item之间设置均等宽度的空白间隙，其边缘间隙不存在

space-evenly：在每个grid item之间设置均等宽度的空白间隙，包括其边缘间隙

网格区域 grid-template-areas: 通过引用grid-area属性指定的网格区域的名称来定义网络模板

代码示例：

grid-template-areas："header header header header"

                                     "main main . main"      //.点号表示空网格单元

                                      "footer footer footer footer"；

grid-template中的属性值 line-name：网格线名字，网格线名称主要是为了对网格区域进行更好的描述。可以为网格线起任一名字。格式如下：

grid-template-areas  命名

grid 简写形式

grid-template-areas