Auto-fit
A CSS Grid repeat() keyword that creates as many repeated tracks as fit within the available space and collapses empty tracks.
CSS in Depth, Second Edition
Auto-fill and auto-fit are CSS Grid track-repetition keywords that determine how many tracks are generated to fit available space.
- How it is used
- Builds responsive card and portfolio grids whose column count follows available space and item constraints.
- How deep it goes
- Explains repeat(), minmax(), flexible track sizing, empty-track behavior, and breakpoint use without detailing browser layout internals.
- Examples
- Demonstrates portfolio photographs and chicken cards arranged in adaptive grids.
- What you can do after
- Apply it via CSS Grid to build adaptive columns without manually specifying each viewport’s column count.
Math for Web Design
auto-fit is a CSS Grid repeat() keyword that creates fitting tracks and collapses empty tracks so available space can be redistributed.
- How it is used
- Builds responsive Grid layouts that adapt track counts and redistribute space without querying viewport width.
- How deep it goes
- Explains repetition math, gap subtraction, empty-track collapse, and flexible redistribution through runnable CSS examples.
- Examples
- Demonstrates two cards in an 850px container, contrasting 212.5px auto-fill tracks with 425px auto-fit tracks.
- What you can do after
- Build responsive card grids with repeat(auto-fit, minmax(...)) and choose whether empty tracks collapse or remain.
Related concepts
- auto-fillalternative to · A CSS Grid repeat() keyword that creates as many repeated tracks as fit within the available space, retaining empty tracks.
- CSS Gridused by · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
- repeat()used by · The CSS repeat() function specifies a repeated sequence of grid track sizes or patterns, using a fixed or automatically determined repetition count.
- gridconfigures · A grid is a regular arrangement of positions or cells organized by rows and columns or by fixed neighboring relationships.
- fraction unituses · The CSS fr unit represents a share of the free space remaining in a grid container after non-flexible track sizes and other deductions are accounted for.
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.