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.
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.
/* <'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;
<'grid-template'>
grid-template
including grid-template-columns
, grid-template-rows
and grid-template-areas
.<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
grid-template-rows
property (and the grid-template-columns
property to none
) and specifying how to auto-repeat the column tracks via grid-auto-columns
(and setting grid-auto-rows
to auto
). grid-auto-flow
is also set to column
accordingly, with dense
if it’s specified. All other grid
sub-properties are reset to their initial values.
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
grid-template-columns
property (and the grid-template-rows
property to none
) and specifying how to auto-repeat the row tracks via grid-auto-rows
(and setting grid-auto-columns
to auto
). grid-auto-flow
is also set to row
accordingly, with dense
if it’s specified. All other grid
sub-properties are reset to their initial values.
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
<div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
#container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; }
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid' in that specification. | Candidate Recommendation | Initial definition |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 57
|
16 | 52
|
No | 44
|
10.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 57 | 57
|
16 | 52
|
44 | 10.3 | 6.0
|
grid-template
, grid-template-rows
, grid-template-columns
, grid-template-areas
, grid-auto-columns
, grid-auto-rows
, grid-auto-flow
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid