This article needs a technical review. How you can help.
Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
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.
Summary
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 |
Syntax
/* Keyword value */ grid-template: none; /* <track-list> values */ grid-template: 100px 1fr; grid-template: [linename] 100px; grid-template: [linename1] 100px [linename2 linename3]; grid-template: minmax(100px, 1fr); grid-template: fit-content(40%); /* <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]; /* 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. <'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>? ]+ [ / <explicit-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 | [ <'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>
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
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-template' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | No support[1] | No support[2] | 10.0-ms[3] | 20-ms[3] | No support[1] | Nightly build-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | No support | 10.0-ms[3] | No support | No support |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags
since Chrome 29.0 and Opera 28.0.
[2] Implemented behind the preference layout.css.grid.enabled
, defaulting to false
since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37). Since Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) the fit-content()
function is supported.
[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this shorthand property.
See also
- Related CSS properties:
grid-template-rows
,grid-template-columns
,grid-template-areas