Grid item
A grid item is a child of a CSS Grid container that participates in its two-dimensional grid layout.
CSS in Depth, Second Edition
A grid item is an element placed into a CSS Grid layout and assigned to one or more grid areas.
- How it is used
- Uses grid items as the page regions, photographs, or cards arranged within a CSS Grid container.
- How deep it goes
- Works through item placement, spanning, implicit rows, dense auto-placement, and the distinction between stretching an item and stretching its contents.
- Examples
- Builds a six-box grid, a page with spanning regions, and a photography portfolio with enlarged featured images.
- What you can do after
- Build it from scratch: place and span grid items, or let automatic placement accommodate an unknown number of them.
Web Design Playground, Second Edition
A grid item is a child of a grid container that participates in its two-dimensional grid layout.
- How it is used
- Uses grid items as the child elements arranged across rows and columns in a CSS Grid layout.
- How deep it goes
- Explains automatic item creation, cell placement, spanning, and alignment, while deferring row and column definition to adjacent work.
- Examples
- Uses a container holding six lettered div items and placement declarations that span columns or rows.
- What you can do after
- Apply it via CSS Grid by turning a parent into a grid container, then placing and aligning its child items.
Read how Web Design Playground, Second Edition explains grid item →
Related concepts
- grid areaconfigured by · A grid area is a rectangular region of one or more CSS Grid cells, optionally identified by a name for layout placement.
- grid containerpart of · A grid container is an element whose display mode establishes a CSS Grid formatting context for laying out its child elements as grid items.
- celluses · A cell is an individual addressable position or bounded region in an organized structure that stores or represents a value, state, or associated data.
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.