Overview
This lecture covers the CSS grid-area property, explaining its role in grid layouts, its syntax, how it works as a shorthand, and key usage details.
Purpose and Basics of grid-area
grid-area is a CSS shorthand property that sets a grid item's size and position inside a grid container.- It defines the edges of a grid item's area by contributing grid lines, spans, or auto values.
- Widely supported,
grid-area has been baseline across browsers since 2017.
Syntax and Values
- Syntax can use 1-4 values:
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;.
- Can use keywords like
auto, integer lines, span, and area names (<custom-ident>).
- Global CSS values like
inherit, initial, unset, etc. are also allowed.
How grid-area Works
- 4-value syntax corresponds to
grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
- If only area name (
<custom-ident>) is used, the grid item is placed in that named area as defined by grid-template-areas.
- Omitting end values causes them to default to the same as the start or to
auto.
- Negative integers count from the end of the grid; 0 is invalid.
Constituent Properties
grid-area is shorthand for: grid-row-start, grid-column-start, grid-row-end, grid-column-end.
Examples
- Example:
grid-area: 2 / 1 / 2 / 4; places an item at row 2, column 1, ending row 2, ending column 4.
- Example:
grid-area: some-grid-area; places the item in the area named by grid-template-areas.
Formal Details
- Applies to grid items and absolutely positioned elements inside a grid container.
- It is not an inherited property.
- Animation type is discrete (jumps between values).
Related Properties
- Related grid properties:
grid-row, grid-row-start, grid-row-end, grid-column, grid-column-start, grid-column-end.
- Works with
grid-template-areas for semantic area placement.
Key Terms & Definitions
- grid-area — Shorthand for setting a grid item's placement and size within a CSS grid.
- <custom-ident> — A named area or line defined in the grid, used for semantic placement.
- span — Specifies how many rows or columns an item should stretch across.
- auto — Default keyword meaning the grid should auto-place the item.
- shorthand property — A CSS property that sets multiple related longhand properties at once.
Action Items / Next Steps
- Practice using
grid-area in CSS grid layouts.
- Review how named areas and line numbers affect grid placement.
- Explore more on related grid properties for complex layouts.