CSS grid attribute

Definition and Usage

The grid property is a shorthand for the following properties:

See also:

CSS Tutorial:CSS Grid Container

Instance

Example 1

Create a three-column grid layout with the first row being 150 pixels high:

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

Try it yourself

Example 2

Define two rows, where 'item1' spans the first two columns of the first two rows (using a five-column grid layout):

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

Try it yourself

Example 3

Name all items and create a ready-made 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';
}

Try it yourself

CSS Syntax

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Property Value

Value Description
none Default Value. Does not define the size of rows or columns.
grid-template-rows / grid-template-columns Specifies the size of columns and rows.
grid-template-areas Specifies the use of named item grid layout.
grid-template-rows / grid-auto-columns Specifies the size (height) of rows, and the 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 (height) of rows, and how to place auto-placed items, and the automatic size of columns.
grid-auto-flow grid-auto-rows / grid-template-columns Specifies how to place auto-placed items, and the automatic size of rows, and sets the grid-template-columns property.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default Value: none none none auto auto row
Inheritance: no
Animation creation: yes, see individual properties. See also:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.grid="250px / auto auto auto"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44

See also:

CSS Reference Manual:grid-template-areas property

CSS Reference Manual:grid-template-rows property

CSS Reference Manual:grid-template-columns property

CSS Reference Manual:grid-auto-rows property

CSS Reference Manual:grid-auto-columns property

CSS Reference Manual:grid-auto-flow property

CSS Reference Manual:grid-row-gap property

CSS Reference Manual:grid-column-gap property