W3cubDocs

/CSS

grid

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties 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.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* <'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;

Values

<'grid-template'>
Defines the grid-template including grid-template-columns, grid-template-rows and grid-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 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'>
Sets up an auto-flow by setting the column tracks explicitly via the 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.

Formal 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:
Computed value as each of the properties of the shorthand:
  • grid-template-rows: as specified, but with relative lengths converted into absolute lengths
  • grid-template-columns: as specified, but with relative lengths converted into absolute lengths
  • grid-template-areas: as specified
  • grid-auto-rows: the percentage as specified or the absolute length
  • grid-auto-columns: the percentage as specified or the absolute length
  • grid-auto-flow: as specified
  • grid-column-gap: the percentage as specified or the absolute length
  • grid-row-gap: the percentage as specified or the absolute length
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type discrete

Formal syntax

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Examples

Creating a grid layout

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
grid 57
57
29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
16 52
52
40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 44
44
28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
10.1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
grid 57 57
57
29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
52
52
40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
43
43
28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
10.3 6.0
6.0
This was added early so is out of sync with the equivalent Chromium version.

See also

© 2005–2020 Mozilla 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