CSS grid-template Property

CSS grid-template property specifies the number of rows and columns and their respective size in a grid layout. It is a shorthand of the following properties:

The grid-template-rows and grid-template-columns are separated by a slash(‘/’).

The code in the example below shows that the first row of the grid container will be of 200px height and there will be 3 columns each of size auto.

Example:

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

We can also use named grid items along with the number of rows and columns and their respective size in the grid.

The code in the example below first assigns a name ‘header’ to the very first item i.e. item1 using the grid-area property. Now this name i.e. ‘header’ points to the grid item1.

The code grid-template: 'header header header' represents that the grid item with name ‘header’ i.e. item1 will span 3 columns in the layout and grid-template: 150px/ auto auto auto; shows that the first row of the grid will be of 150px height and there will be 3 columns each of size auto.

Example:

#item1{
  grid-area: header;
}
.grid-container{
  grid-template: 'header header header' 150px / auto auto auto;
}

CSS Syntax

The grid-template property has the following syntax:

grid-template: none|grid-template-rows/grid-template-columns|grid-template-areas|initial|inherit;

Property Values

The grid-template-property accepts the following values:

noneThis is the default value. There will be only one column of grid items with size auto.
grid-template-rowsSpecifies the number of rows and their respective height within the grid container.
grid-template-columnsSpecifies the number of columns and their respective width within the grid container.
grid-template-areasIt defines blocks/sections in the grid layout.
initialSets the grid-template property to its default value(none).
inheritInherits the grid-template property from the parent element.

General Info

Default Valuenone none none
InheritedNo
JavaScript Usageelement.style.gridTemplate = “200px/auto auto auto”;