Web4College

CSS grid-template property

src

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 Default

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;
Try it

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;;
Try it

Applicable to

See longhand properties