This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The grid-template
CSS property is a shorthand property for defining grid columns, rows and areas.
Authors can set values for the longhand properties: grid-template-rows
, grid-template-columns
and grid-template-areas
.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | grid containers |
Inherited | no |
Percentages | as each of the properties of the shorthand:
|
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
/* Keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ 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 values */ 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; /* Global values */ grid-template: inherit; grid-template: initial; grid-template: unset;
none
none
, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the grid-auto-rows
and grid-auto-columns
properties.<'grid-template-rows'> / <'grid-template-columns'>
grid-template-rows
and grid-template-columns
to the specified values, and sets grid-template-areas
to none
.[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
grid-template-areas
to the strings listed, grid-template-rows
to the track sizes following each string (filling in auto
for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns
to the track listing specified after the slash (or none
, if not specified).Note: The repeat()
function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.
Note: The grid
shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use grid
(as opposed to grid-template
) to prevent these values from cascading in seperately.
none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere
<length-percentage> = <length> | <percentage>
#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; }
<section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section>
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-template' in that specification. | Candidate Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57.0[1] | 20 (12.10240)-ms[3] | 52.0 (52.0)[2] | 10.0-ms[3] | No support[4] | Nightly build-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 52.0 (52.0)[2] | 10.0-ms[3] | No support | No support |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags
since Chrome 29.0.
[2] Implemented behind the preference layout.css.grid.enabled
since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false
. Since Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) the fit-content()
function is supported. And since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) the preference is enabled by default.
[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this shorthand property.
[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags
since Opera 28.0.
grid-template-rows
, grid-template-columns
, grid-template-areas
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template