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.

#CSS digger
Was this article helpful?

 
arrow
grid-template-areas consists of more than one cells.
×

Ctrl+D