Grid container
A grid container is an element whose display mode establishes a CSS Grid formatting context for laying out its child elements as grid items.
CSS in Depth, Second Edition
A grid container is an element whose display mode establishes a CSS Grid formatting context for its child elements.
- How it is used
- Uses a grid container to arrange direct children in page layouts, portfolios, cards, and responsive columns.
- How deep it goes
- Develops templates, implicit tracks, alignment, and nested subgrid through rendered layouts rather than browser internals.
- Examples
- Builds a six-box grid, a main-and-sidebar page, an expanding photo portfolio, and responsive three-column content.
- What you can do after
- Build it from scratch: define a grid container, size its tracks, and let additional items create rows when needed.
Read how CSS in Depth, Second Edition explains grid container →
Web Design Playground, Second Edition
A grid container is an element whose child elements are laid out according to CSS Grid rules.
- How it is used
- Organizes child elements horizontally and vertically as the foundation for full page layouts.
- How deep it goes
- Defines container conversion and automatic items, then develops sizing, placement, gaps, areas, and alignment.
- Examples
- Demonstrates a div and body converted with display: grid, plus a three-column body that centers portfolio content.
- What you can do after
- Apply it via CSS Grid to convert a parent element and control its child layout with tracks and alignment.
Read how Web Design Playground, Second Edition explains grid container →
Related concepts
- grid itemhas part · A grid item is a child of a CSS Grid container that participates in its two-dimensional grid layout.
- display propertyconfigured by · The CSS display property specifies how an element participates in layout and the type of box it generates.
- grid-template-columnsconfigured by · The CSS grid-template-columns property defines the sizes and optional names of a grid’s column tracks and grid lines.
- grid-template-rowsconfigured by · The CSS grid-template-rows property defines the number, sizes, and track structure of a grid's rows.
- declarationconfigured by · A CSS declaration is a property-value pair that specifies one styling instruction.
- algebraic structurekind of · An algebraic structure is a set of elements equipped with operations and laws governing those operations.
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.