 |
VOOZH | about |
|
VOOZH | about |
The grid-area property specifies a grid item's size and location in a grid layout. It allows you to define the starting and ending row and column lines for an item, or to assign a name to the item for easy reference in grid templates.
Syntax
grid-area: grid-row-start | grid-column-start |
grid-row-end | grid-column-end | itemname;
Property Value | Description |
|---|---|
grid-row-start | It sets the row on which the item is displayed first. |
grid-column-start | It sets the column on which the item is displayed first. |
grid-row-end | It specifies the row line to stop displaying the item or span how many rows. |
grid-column-end | It sets the number of columns to span. |
itemname | It sets a name for the grid item. |
In this example, we create a grid with one named area "Area" spanning three columns using grid-area. Other items fill the remaining cells with defined styling.
Output:
In this example we use grid-area to define named areas in a grid layout. Each area is styled with specific content alignment and size within the grid container.
Output:
The browsers supported by grid-area property are listed below:
