CSS grid-template-areas property
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.
grid-template-areas : space separated strings (Each string represents one row and each token in that string represents a column)
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";
'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";
'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";
It applies to grid containers.
Was this article helpful?