CSSgrid Property

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

Thegrid property is a shorthand property for:

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

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 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 aboutinherit

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: Thegrid-template-areas property

CSS Reference: Thegrid-template-rows property

CSS Reference: Thegrid-template-columns property

CSS Reference: Thegrid-auto-rows property

CSS Reference: Thegrid-auto-columns property

CSS Reference: Thegrid-auto-flow property

CSS Reference: Thegrid-row-gap property

CSS Reference: Thegrid-column-gap property

❮ Previous Complete CSSReference Next❯

★+1