grid-template

Last Updated: April 29, 2022

Definition and Usage

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

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

CSS property grid-template has following values

Value	Description	Example
none	default value
grid-template rows / grid-template-columns	Specify the sizes of rows and columns.sets `grid-template-rows` and `grid-template-columns` but `grid-template-areas` to none	Example A
grid-template-areas	Use named items to define grid	Example B
initial	Sets this property to its default value of the shorthand `grid-template-columns: none` `grid-template-rows: none` `grid-template-areas: none`
inherit	Inherit property value from its parent element

Example A

Specify the rows and columns for gird-template CSS property

.container{ 
 grid-template: auto 1fr / auto 1fr auto;
 column-gap:10px;
 row-gap: 10px;
}

Example B

How grid-template CSS property is used with named items

.container{ 
 grid-template: "a a a a" "b c c c" "d d d d";
 column-gap:10px;
 row-gap: 10px;
}