CSS grid-template attribute

Definition and Usage

The grid-template property is a shorthand for the following properties:

See also:

CSS Tutorial:CSS Grid Item

CSS Reference Manual:grid-area attribute

CSS Reference Manual:grid-template-rows attribute

CSS Reference Manual:grid-template-columns attribute

CSS Reference Manual:grid-template-areas attribute

Instance

Example 1

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

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

Try It Yourself

Example 2

Specifies two rows, where "item1" spans the first two columns of the first two rows (in a five-column grid layout):

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

Try It Yourself

Example 3

Name all items and then create a ready-made web page 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-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Try It Yourself

CSS Syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Attribute Value
Value Description
none Default Value. Does not specify the size of columns or rows.
grid-template-rows / grid-template-columns Specifies the size of columns and rows.
grid-template-areas Specifies the grid layout using named items.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: none none none
Inheritance: No
Animation production: Supported. See:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridTemplate = "250px / auto auto"

Browser Support

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

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