Implicit grid
An implicit grid is the set of CSS Grid tracks automatically created beyond those explicitly defined to place grid items.
Math for Web Design
An implicit grid track is a CSS Grid row or column track generated automatically outside the explicitly defined grid to place grid items.
- How it is used
- Explains how CSS Grid creates and sizes extra rows or columns when item placement exceeds the explicit grid.
- How deep it goes
- Defines implicit tracks within the sizing algorithm and explains their negative-line limitation, but does not detail every sizing calculation.
- Examples
- Uses out-of-range column placement, grid-auto-rows, negative-line failures, and exercises calculating spans and track sizes.
- What you can do after
- Diagnose unexpected grid placement by distinguishing explicit from implicit tracks and checking whether negative line numbers are valid.
CSS in Depth, Second Edition
Implicit grid placement is CSS Grid's automatic placement of items into tracks that are created or selected beyond the explicitly defined grid.
- How it is used
- Handles large or unknown sets of grid items, including database results and wrapping portfolio images.
- How deep it goes
- Defines track generation, default sizing, auto-track controls, and negative-line behavior without detailing the full placement algorithm.
- Examples
- Uses a photography portfolio with responsive columns, implicit rows, wrapping images, and grid-auto-rows: 1fr.
- What you can do after
- Build it from scratch with CSS Grid for a variable number of items using automatically generated rows or tracks.
Read how CSS in Depth, Second Edition explains implicit grid →
Related concepts
- grid-auto-rowsproduced by · The CSS grid-auto-rows property specifies the sizes of implicitly created grid rows.
- explicit gridcontrasts with · An explicit grid is the portion of a CSS Grid whose rows and columns are directly defined by grid-template properties.
- explicit track creationcontrasts with · Explicit track creation is the definition of grid rows or columns directly by a grid declaration.
- grid-columnconfigured by · The CSS grid-column shorthand property specifies the start and end grid lines defining a grid item's column placement.
- grid-auto-columnsconfigured by · The CSS grid-auto-columns property specifies the sizes of implicitly created grid columns.
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.