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

grid-template,CSS 属性简写,用以定义网格中分区

尝试一下

语法

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-rowsgrid-auto-columns定其尺寸。

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

指定grid-template-rowsgrid-template-columns之值,并设grid-template-areasnone

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

<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?

<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-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-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

<line-name-list> =
[ <line-names> | <name-repeat> ]+

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

<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<fixed-breadth> =
<length-percentage [0,∞]>

示例

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
初始值该简写所对应的每个属性:
适用元素网格容器
是否是继承属性
Percentages该简写所对应的每个属性:
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:
  • 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: 离散值

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-template
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见