Example

A simple grid-area property example:

Laboratory

description & Usage

To determine the size and type of an item in a grid layout, we use the grid-area property, which, in addition, has the following properties:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

are also covered by it.

Informations

# Description
Default Value auto / auto / auto / auto
Inherited no
Animatable yes
Version CSS Grid Layout Module Level 1
JavaScript syntax object.style.gridArea="1 / 2 / span 2 / span 3"

Browser compatibility and Support

# Chrome Edge Firefox Safari Opera
grid-area

Syntax

Values

Values Description
grid-row-start Determines which row to start displaying the item.
grid-column-start Determines in which column to start displaying the item.
grid-row-end Determines in which row the item will be displayed.
grid-column-end Determines in which column the item will be displayed.
itemname Specifies a name for the grid item.