grid-template

描述

CSS属性 grid-template，是grid-template-area、grid-template-column、grid-template-row属性的简写，用以定义网格中行、列与分区。

取值

• none

  关键词，设上文“所简写属性”为none，即恢复默认设置。行列隐式生成，grid-auto-rows与grid-auto-columns定其尺寸。

• <'grid-template-rows'> / <'grid-template-columns'>

  指定grid-template-rows与grid-template-columns之值，并设grid-template-areas为none。

• [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

  < line-names >是网格名称， < string >是 grid-template-areas的名称，< track-size > 是 grid-template-rows的值（无具体的值则设置成 auto ） ，然后按这种方式依次拼接。/ 后的 < explicit-track-list > 是 grid-template-columns 的值。

语法

/* 值为关键词 */
grid-template: none;

/* 为 grid-template-rows / grid-template-columns */
/* 第一行高100px 第二行高1fr / 第一列宽50px 第二列宽1fr */
grid-template: 100px 1fr / 50px 1fr;  
/* 第一行auto 第二行1fr / 第一列auto 第二列 1fr 第三列 auto */
grid-template: auto 1fr / auto 1fr auto;   
/* 行名称 高度100px / 列名称1 列宽30% 列名称2 列宽70% */
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;  
/* 适配行内容100px / 适配列内容40% */
grid-template: fit-content(100px) / fit-content(40%);

/* 为 grid-template-areas grid-template-rows / grid-template-column */
/* 定义了2行3列的区域名称 */
grid-template: "a a a"
"b b b";
/* 第一行aaa定义了3列，第一行高为20%； 第二行bbb定义了3列，第二行高为auto */
grid-template: "a a a" 20%
"b b b" auto;
/* [header-top]等名称去掉也是一样的，也是第一行aaa定义3列，行高为auto，第二行bbb定义2列，行高为1fr */
grid-template: [header-top] "a a a"     [header-bottom]
    [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto;

/* 为全局值 */
grid-template: inherit;
grid-template: initial;
grid-template: unset;