grid-template

Last Updated: April 29, 2022

Definition and Usage

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

CSS Property Syntax

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

CSS Property Value

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;
}
A
B
C
D

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;
}
A
B
C
D
Test