CSS `grid` Property

Example

Create a three-column grid layout and set the height of the first row to 160 pixels:

.grid-container {
  display: grid;
  grid: 160px / auto auto auto;
}

Tag Definition and Usage

grid is a shorthand property for all grid container properties in CSS, which can be used to set the following properties:

Explicit grid properties: grid-template-rows, grid-template-columns, and grid-template-areas.
Implicit grid properties: grid-auto-rows, grid-auto-columns, and grid-auto-flow.
Spacing properties: grid-column-gap and grid-row-gap.

Default value:	none none none auto auto row
Inherited:	no
---	---
Animatable:	Yes, see individual properties. Read animatable Try it
---	---
Version:	CSS Grid Layout Module Level 1
---	---
JavaScript syntax:	`object.style.grid="250px / auto auto auto"` Try it
---	---

Browser Support

The numbers in the table specify the first browser version that supports the property.

Property	Chrome	Firefox	Safari	Opera	Edge
grid	57	16	52	10	44

Property Values

Value	Description
none	Default value. Does not define the size of rows or columns.
grid-template-rows / grid-template-columns	Sets the size of columns and rows.
grid-template-areas	Specifies the grid layout using named grid items.
grid-template-rows / grid-auto-columns	Specifies the size of rows (height) and automatic size of columns.
grid-auto-rows / grid-template-columns	Specifies the automatic size of rows and sets the `grid-template-columns` property.
grid-template-rows / grid-auto-flow grid-auto-columns	Specifies the size of rows (height), how the auto-placement algorithm works, and the automatic size of columns.
grid-auto-flow grid-auto-rows / grid-template-columns	Specifies how the auto-placement algorithm works, the automatic size of rows, and sets the `grid-template-columns` property.
initial	Sets the property to its default value. Read initial
inherit	Inherits this property from its parent element. Read inherit

Online Example

Example

Set two rows, with item1 spanning the first two columns of the first two rows:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Example

Name all items and create a ready-to-use web template:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

CSS grid Property

Example

Tag Definition and Usage

Browser Support

Property Values

Online Example

Example

Example

More Content

CSS `grid` Property