template 的一种简洁的写法

如图简写格式

属性值的定义

如图，简写定义

grid-template简写

grid-template

grid-template-rows、 gird-teamplate-columns、 gird-teamplate-ares的简写

不建议使用，写一起容易混淆

.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>

}

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

代码示例：

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

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

                                      "footer footer footer footer"；

grid-template简写例子

grid-template简写属性

属性值

1:<none>将三个属性都设置为其初始值

2:<subgrid >把grid-template-rows和grid-template-columns设置为subgrid，并且grid-template-areas设置为初始值（即一个单元格的大小）

3:<grid-template-rows/grid-template-columns>把grid-template-rows和grid-template-columns设置为指定值，于此同时，设置grid-template-areas为none

.container {
   gird-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}