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.
/* <'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 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:
|
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 (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57.0[1] | No support[3] | 52.0 (52.0)[2] | No support[3] | 44[4] | 10.1 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 57.0[1] | 57.0[1] | 52.0 (52.0)[2] | No support[3] | 10.3 |
[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 52.0 it is enabled
by default.
[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define the grid
shorthand. See the request for updating the implementation.
[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags
since Opera 28.0.
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