Example

A simple grid-template-areas property example:

Laboratory

description & Usage

To specify specific areas in a grid layout, we use the grid-template-areas property.

Informations

# Description
Default Value none
Inherited no
Animatable yes
Version CSS Grid Layout Module Level 1
JavaScript syntax object.style.gridTemplateAreas=". . . myArea myArea"

Browser compatibility and Support

# Chrome Edge Firefox Safari Opera
grid-template-areas

Syntax

Values

Values Description
none Default
itemnames Determines how columns and rows are displayed.