CSS - grid-template
The grid-template
CSS property is a shorthand property for defining grid columns, rows and areas.
Examples
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
<section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section>
Result
Syntax
/* Keyword value */ grid-template: none; /* <track-list> values */ grid-template: 100px 1fr; grid-template: [linename] 100px; grid-template: [linename1] 100px [linename2 linename3]; /* <auto-track-list> values */ grid-template: 200px repeat(auto-fill, 100px) 300px; grid-template: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* Subgrid values */ grid-template: subgrid; grid-template: subgrid [linename1]; grid-template: subgrid repeat(4, [linename1]); grid-template: subgrid repeat(4, [linename1 linename2]); grid-template: subgrid repeat(auto-fill, [linename1]); /* Global values */ grid-template: inherit; grid-template: initial; grid-template: unset;
Values
none
- Is a keyword that sets all three longhand properties to
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 thegrid-auto-rows
andgrid-auto-columns
properties. subgrid
- Is a keyword setting
grid-template-rows
andgrid-template-columns
tosubgrid
, andgrid-template-areas
to its initial value. It indicates that the grid will align to its parent grid in both axes. Rather than specifying the sizes of rows and columns explicitly, they’ll be taken from the parent grid’s definition. <'grid-template-rows'> / <'grid-template-columns'>
- Sets
grid-template-rows
andgrid-template-columns
to the specified values, and setsgrid-template-areas
tonone
. [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?
- Sets
grid-template-areas
to the strings listed,grid-template-rows
to the track sizes following each string (filling inauto
for any missing sizes), and splicing in the named lines defined before/after each size, andgrid-template-columns
to the track listing specified after the slash (ornone
, if not specified).
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.
Formal syntax
none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> subgrid <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/grid-template-rows" title="none | <track-list> | <auto-track-list> | subgrid <line-name-list>?"><'grid-template-rows'></a> / <a href="css/grid-template-columns" title="none | <track-list> | <auto-track-list> | subgrid <line-name-list>?"><'grid-template-columns'></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/grid-template#line-names"><line-names></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/string" title=""><string></a> <a href="css/grid-template#track-size"><track-size></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/grid-template#line-names"><line-names></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> / <a href="css/grid-template#track-list"><track-list></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a><p>where <br><code><line-names> = '<a href="css/value_definition_syntax#brackets" title="Brackets">[</a>' <custom-ident><a href="css/value_definition_syntax#asterisk_(*)" title="Asterisk">*</a> '<a href="css/value_definition_syntax#brackets" title="Brackets">]</a>'<br><track-size> = <a href="css/grid-template#track-breadth"><track-breadth></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> minmax( <a href="css/grid-template#track-breadth"><track-breadth></a> , <a href="css/grid-template#track-breadth"><track-breadth></a> )<br><track-list> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/grid-template#line-names"><line-names></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/grid-template#track-size"><track-size></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <track-repeat> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a> <a href="css/grid-template#line-names"><line-names></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a></code></p><p>where <br><code><track-breadth> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <flex> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> min-content <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> max-content <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto<br><line-names> = '<a href="css/value_definition_syntax#brackets" title="Brackets">[</a>' <custom-ident><a href="css/value_definition_syntax#asterisk_(*)" title="Asterisk">*</a> '<a href="css/value_definition_syntax#brackets" title="Brackets">]</a>'<br><track-size> = <a href="css/grid-template#track-breadth"><track-breadth></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> minmax( <a href="css/grid-template#track-breadth"><track-breadth></a> , <a href="css/grid-template#track-breadth"><track-breadth></a> )</code></p><p>where <br><code><track-breadth> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <flex> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> min-content <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> max-content <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto</code></p>
Description
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:
|
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 29.0[1] | 40.0 (40.0)[2] | Not supported[3] | Not supported[3] | 28.0[1] | Nightly build-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags
.
[2] Implemented behind the preference layout.css.grid.enabled
, defaulting to false
.
[3] Internet Explorer and Edge implement an older version of the specification, which didn't define this shorthand property.
See Also
- Related CSS properties:
grid-template-rows
,grid-template-areas
,grid-template
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-template' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/grid-template