grid-template
=============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
**`grid-template`**，CSS 属性简写，用以定义网格中行、列与分区。

尝试一下
----

所简写属性：`grid-template-rows`、`grid-template-columns`与`grid-template-areas`。

语法
--


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

/\* 为 grid-template-rows / grid-template-columns \*/
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/\* 为 grid-template-areas grid-template-rows / grid-template-column \*/
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
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;
```

### 可设值

`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> ]?`

设`grid-template-areas`为列得`<string>`、`grid-template-columns`为<explicit-track-list>（默认为`none`）、`grid-template-rows`为`<track-size>`（默认为`auto`）并拼接尺寸前后所定义之行。

注：轨道被用以与“ASCII art”（即字符画，此处指`<string>`）中行列逐一视觉对齐，故`<explicit-track-list>`中不允许`repeat()`。

**注：**`grid`可如此用，但将重置隐式网格属性。Use `grid` (as opposed to `grid-template`) to prevent these values from cascading in seperately.

### 形式语法
```

grid-template =   
  none                                                |  
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |  
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?    
  
<line-names> =   
  '[' <custom-ident>\* ']'    
  
<track-size> =   
  <track-breadth>                                   |  
  minmax( <inflexible-breadth> , <track-breadth> )  |  
  fit-content( <length-percentage [0,∞]> )            
  
<explicit-track-list> =   
  [ <line-names>? <track-size> ]+ <line-names>?    
  
<track-breadth> =   
  <length-percentage [0,∞]>  |  
  <flex [0,∞]>               |  
  min-content                |  
  max-content                |  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  |  
  min-content                |  
  max-content                |  
  auto                         
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### CSS


```css
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-column: foot;
}
```

### HTML


```html
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
```

### 结果

规范
--

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `grid-template-columns`: `none`
* `grid-template-rows`: `none`
* `grid-template-areas`: `none`
 |
| 适用元素 | grid containers |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `grid-template-columns`: refer to corresponding dimension of the content area
* `grid-template-rows`: refer to corresponding dimension of the content area
 |
| 计算值 | as each of the properties of the shorthand:* `grid-template-columns`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-rows`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-areas`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas`: discrete
 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 相关 CSS 属性：`grid-template-rows`、`grid-template-columns`、`grid-template-areas`
* 网格布局指导：
    + *CSS 网格中基于线的定位*
    + *网格定义的简写规则*
* 视频教程：\_ Grid Template shorthand\_