grid-area

The grid-area CSS property is shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

Syntax

CSS

grid-area: value;

JS

object.style.gridArea = "value";

Values

<'grid-area'> = <grid-line> [ / <grid-line> ]{0,3}
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
auto

Automatically specified by the user agent.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<integer>

Specifies one or more decimal digits (0-9).

span

Specifies the number of tracks the item occupies.

Initial

auto

Examples

auto

custom-ident

integer

span

JS

Internal

grid-column

grid-column-end

grid-column-start

grid-row

grid-row-end

grid-row-start

External

World Wide Web Consortium (W3C)

Home Menu