Grid area
A grid area is a rectangular region of one or more CSS Grid cells, optionally identified by a name for layout placement.
CSS in Depth, Second Edition
A named grid area is a CSS Grid region assigned an author-defined name for referring to the region in layout declarations.
- How it is used
- Places known page regions by name instead of counting or naming grid lines.
- How deep it goes
- Works through container templates and item assignments, then specifies rectangular shapes and empty-cell notation.
- Examples
- Maps a header, navigation, main region, and two sidebar tiles onto a four-row page grid.
- What you can do after
- Build it from scratch with `grid-template-areas` on a container and `grid-area` on its items.
Web Design Playground, Second Edition
A named grid area is a rectangular region of CSS Grid cells identified by a shared name.
- How it is used
- Places page items by readable names instead of row and column line numbers.
- How deep it goes
- Defines area naming, spanning, empty cells, and assignment, then demonstrates a complete layout without covering browser internals.
- Examples
- Uses header, nav, main, sidebar, and footer to build a classic holy grail page layout.
- What you can do after
- Build a named CSS Grid layout by mapping cells to areas and assigning items with grid-area.
Read how Web Design Playground, Second Edition explains grid area →
Related concepts
- grid itemconfigures · A grid item is a child of a CSS Grid container that participates in its two-dimensional grid layout.
- grid linealternative to · A grid line is a horizontal or vertical boundary in a CSS Grid layout that defines track edges and item placement positions.
- Rectangleuses · A rectangle is a planar quadrilateral with four right angles and opposite sides of equal length.
- grid-template-areasconfigured by · The CSS grid-template-areas property defines named grid areas by assigning quoted names to cells across grid rows.
- subgridused by · Subgrid is a CSS Grid feature that lets a nested grid use and align with its parent grid's tracks for rows, columns, or both.
- grid-columnused by · The CSS grid-column shorthand property specifies the start and end grid lines defining a grid item's column placement.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.