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
), and all the implicit grid properties (grid-auto-rows
, grid-auto-columns
, and grid-auto-flow
), in a single declaration.
/* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? values */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content); /* Global values */ grid: inherit; grid: initial; grid: unset;
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 NOT reset by this shorthand.
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
Values
<'grid-template'>
- Defines the
grid-template
includinggrid-template-columns
,grid-template-rows
andgrid-template-areas
. <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
- Sets up an auto-flow by setting the row tracks explicitly via the
grid-template-rows
property (and thegrid-template-columns
property tonone
) and specifying how to auto-repeat the column tracks viagrid-auto-columns
(and settinggrid-auto-rows
toauto
).grid-auto-flow
is also set tocolumn
accordingly, withdense
if it’s specified.All other
grid
sub-properties are reset to their initial values. [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
- Sets up an auto-flow by setting the column tracks explicitly via the
grid-template-columns
property (and thegrid-template-rows
property tonone
) and specifying how to auto-repeat the row tracks viagrid-auto-rows
(and settinggrid-auto-columns
toauto
).grid-auto-flow
is also set torow
accordingly, withdense
if it’s specified.All other
grid
sub-properties are reset to their initial values.
Formal syntax
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Example
HTML Content
<div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS Content
#container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57 291 | 16 | 52 402 | No | 44 283 | 10.1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 57 | 57 291 | 16 | 52 402 | No | 44 | 10.3 |
1. From version 29: this feature is behind the Enable experimental Web Platform features
preference. To change preferences in Chrome, visit chrome://flags.
2. From version 40: this feature is behind the layout.css.grid.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. From version 28: this feature is behind the Enable experimental Web Platform features
preference.
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
- Grid Layout Guide: Line-based placement with CSS Grid
- Grid Layout Guide: Grid template areas - Grid definition shorthands