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. |