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
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
