网格区域。

需要注意的点：

1.每一行需要使用“”进行括起来

2.每一个值对应一个网格单元，不能漏掉任何一个网格单元

3.值与值之间使用空格隔开

4.行与行之间使用回车进行分隔没有其他符号

如图，实际定义的效果，如果名字一样，就会被定义成相同的区块

使用grid-area进行网格单元的设置

网格区域的定义

grid-teamplate-areas 

1. grid-area定义的网格区域名称

2. .空的网格单元

3. none 没有定义网格区域

4. 

.container{

frid-template-areas:none|

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

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

"...."

}

grid-template-areas

网格区域：

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

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

                                      "footer footer footer footer"；

.container{

grid-template-columns:[one] 40px [two second] 50px auto 50px 40px;

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

grid-template-areas: <grid-area-name> | . grid-area-name |. grid-area-name|. ... 

/* grid-area-name : 网格区域的名称

.  :代表一个空的网格单元

none:没有定义网格区域

*/

grid-template-areas: "header header header header"

"main main . sidebar"

"footer footer footer footer"

}

grid-template-areas例子

grid-template-areas语法

属性值

1：<grid-area-name>:使用grid-area属性设置的网格

2：".":点号代表一个空单元格

3：none：没有定义网格区域

grid-template-area，网格区域，对应的属性值：

grid-area-name：使用grid-area属性设置网格区域的名称。

“."：点号表示一个空网格单元。

none：没有定义网格区域。