CSS - grid
The grid
CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows
, grid-template-columns
, and grid-template-areas
), all the implicit grid properties (grid-auto-rows
, grid-auto-columns
, and grid-auto-flow
), and the gutter properties (grid-column-gap
and grid-row-gap
) in a single declaration.
Example
FIXME:
Syntax
/* <'grid-template'> values */ grid: none; grid: subgrid; grid: 100px 1fr; grid: [linename1] 100px [linename2 linename3]; grid: 200px repeat(auto-fill, 100px) 300px; grid: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid: grid-template: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* <'grid-auto-flow'> values */ grid: row; grid: column; grid: dense; grid: row dense; grid: column dense; /* <'grid-auto-flow'> + <'grid-auto-rows'> / <'grid-auto-columns'> values */ grid: row 200px; grid: column 80vmax; grid: row dense 30em; grid: column dense min-content; grid: dense minmax(300px, max-content); grid: row 400px / 40%; grid: column auto / minmax(mix-content, 1fr); /* Global values */ grid: inherit; grid: initial; grid: unset;
Values
See the values for the longhands grid-template
, grid-auto-flow
, grid-auto-rows
, grid-auto-columns
.
<'grid-template'>
- Defines the
grid-template
includinggrid-template-columns
,grid-template-rows
andgrid-template-areas
. <'grid-auto-flow'>
- Defines the
grid-auto-flow
controlling how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. <'grid-auto-rows'>
- Defines the
grid-auto-rows
, specifying the size of implicitly-created grid row tracks. <'grid-auto-columns'>
- Defines the
grid-auto-columns
, specifying the size of implicitly-created grid column tracks.
Formal syntax
<a href="css/grid-template" title="none | subgrid | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?"><'grid-template'></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-auto-flow" title="[ row | column ] || dense"><'grid-auto-flow'></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/grid-auto-rows" title="<track-size>"><'grid-auto-rows'></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> / <a href="css/grid-auto-columns" title="<track-size>"><'grid-auto-columns'></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</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#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a>
Description
The grid
CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows
, grid-template-columns
, and grid-template-areas
), all the implicit grid properties (grid-auto-rows
, grid-auto-columns
, and grid-auto-flow
), and the gutter properties (grid-column-gap
and grid-row-gap
) in a single declaration.
If the <'grid-auto-columns'> value is omitted, it is set to the value specified value for <'grid-auto-rows'>. Other omitted values are set to their initial values.
Note: You can only specify the explicit or the implicit grid properties in a single grid
declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are reset by this shorthand, even though they can’t be set by it.
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] | No support[3] | No support | 28.0[1] | Nightly build-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | No support | No support[3] | No support | No support |
[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 implements an older version of the specification, which doesn't define the grid
shorthand.
See Also
- Related CSS properties:
grid-template
,grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-columns
,grid-auto-rows
,grid-auto-flow
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid' 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