CSS grid Property

❮ Previous Complete CSS Reference Next ❯

Example

Make a three columns grid layout where the first row is 150px high:

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

Definition and Usage

The grid property is a shorthand property for:

Default value:	none none none auto auto row
Inherited:	no
Animatable:	yes, see individual properties. Read about 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 fully supports the property.

Property
grid	57	16	52	10	44

CSS Syntax

Property Values

Value	Description	Demo
none	Default value. No specific sizing of the columns or rows
grid-template-rows / grid-template-columns	Specifies the size(s) of the columns and rows	Demo ❯
grid-template-areas	Specifies the grid layout using named items	Demo ❯
grid-template-rows / grid-auto-columns	Specifies the size (height) of the rows, and the auto size of the columns
grid-auto-rows / grid-template-columns	Specifies the auto size of the rows, and sets the grid-template-columns property
grid-template-rows / grid-auto-flow grid-auto-columns	Specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns
grid-auto-flow grid-auto-rows / grid-template-columns	Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify two rows, where "item1" spans the first two columns in the first two rows (in a five columns grid layout):

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

Try it Yourself »

Example

Name all items, and make a ready-to-use webpage 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 Tutorial: CSS Grid Container

CSS Reference: The grid-template-areas property

CSS Reference: The grid-template-rows property

CSS Reference: The grid-template-columns property

CSS Reference: The grid-auto-rows property

CSS Reference: The grid-auto-columns property

CSS Reference: The grid-auto-flow property

CSS Reference: The grid-row-gap property

CSS Reference: The grid-column-gap property

❮ Previous Complete CSS Reference Next ❯