CSS grid-template-areas property
Description
CSS grid-template-areas represents named areas withing a grid. These grid areas may consist of more than one cells. These named grid areas are used to place the items.
We have a grid structure that contains 4 columns and 3 rows. we define different areas in the grid and place an item in one of those areas (a, b, c, d, e, f).
For example, we are placing an item in the 'b' area.
Syntax
grid-template-areas : space separated strings (Each string represents one row and each token in that string represents a column)
Property values
stringsDefault
-
We are observing an item that occupies the area 'b'. 'b' area consists of two cells in the first row.
grid-template-areas: "a a b b" "c c d d" "e e f f";
strings
-
'b' area is occupying the three cells in the second row.
grid-template-areas: "a a a a" "b b b c" "d d e f";
strings
-
'b' area is occupying four cells in the last row.
grid-template-areas: "a a a a" "c d e f" "b b b b";
Applicable to
It applies to grid containers.
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
