Web4College

CSS grid-template-areas property

src

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

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

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

Applicable to

It applies to grid containers.