CSS grid-template property

Description

It is a shorthand property of grid-template-areas, grid-template-column, and grid-template-rows.


We have a grid structure that contains 4 columns and 3 rows. we'll define different areas and place an item in one of those areas. The value consists of strings for the sake of understanding.

Syntax

grid-template : none | [ grid-template-rows  /  grid-template-columns ] | [ line-name   grid-area   track-size ]+  /  track-list

Property values

grid-template-rows / grid-template-columns

The following grid-template is the same as

grid-template-rows: 30% 1fr 40%;

grid-template-columns: 30% 1fr;

grid-template-areas: none.

grid-template: 30% 1fr 40% / 30% 1fr;

line-name grid-area track-size / track-list

grid-template-areas: "a a a" "b b b";

grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];

grid-template-columns: auto 1fr auto;

We can combine all the above given longhand properties into one shorthand 'grid-template' property.

grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto;;

Applicable to

See longhand properties

#CSS digger
Was this article helpful?

 
It is a shorthand property of grid-template-areas, grid-template-column, and grid-template-rows.
×

Ctrl+D