Web/CSS/grid

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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: `grid-template-rows`: `none` `grid-template-columns`: `none` `grid-template-areas`: `none` `grid-auto-rows`: `auto` `grid-auto-columns`: `auto` `grid-auto-flow`: `row` `grid-column-gap`: `0` `grid-row-gap`: `0` `column-gap`: `normal` `row-gap`: `normal`
Applies to	grid containers
Inherited	no
Percentages	as each of the properties of the shorthand: `grid-template-rows`: refer to corresponding dimension of the content area `grid-template-columns`: refer to corresponding dimension of the content area `grid-auto-rows`: refer to corresponding dimension of the content area `grid-auto-columns`: refer to corresponding dimension of the content area
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 LayoutThe definition of 'grid' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`grid`	Chrome Full support 57 Full support 57 Full support 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.	Edge Full support 16	Firefox Full support 52 Full support 52 No support 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.	IE No support No	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 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.	Firefox Android Full support 52 Full support 52 No support 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.	Opera Android Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0 Notes' Full support 6.0 Notes' Notes' This was added early so is out of sync with the equivalent Chromium version.

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.