Auto
auto is a CSS keyword whose value is determined by the relevant property’s rules, layout algorithm, available space, and content.
Web Design Playground, Second Edition
The CSS auto value lets the browser determine a property's value according to its layout rules and available content.
- How it is used
- Uses auto to let browser layout rules determine dimensions, image proportions, margins, and grid track sizes.
- How deep it goes
- Explains practical sizing and spacing effects with examples, but does not descend into browser layout internals.
- Examples
- Demonstrates fluid images, centered elements, automatically sized grid tracks, and content-driven block heights.
- What you can do after
- Apply it via CSS to create fluid images, center fixed-width elements, and allow layouts to adapt to content and available space.
Read how Web Design Playground, Second Edition explains auto →
Tiny CSS Projects
The CSS auto keyword lets the relevant layout algorithm determine a size from content and available space.
- How it is used
- Controls content-based grid sizing and centers constrained layouts in responsive interfaces.
- How deep it goes
- Defines grid minimum and maximum behavior and demonstrates centered layouts, but does not descend into the full sizing algorithm.
- Examples
- Uses grid columns, fixed-header layouts, centered newspaper pages, and a virtual credit-card container.
- What you can do after
- Apply it via CSS to size grid tracks from content and center elements within constrained responsive layouts.
Web Design Playground
A CSS keyword value that delegates the computed size or alignment to the browser's automatic calculation or inherited context.
- How it is used
- Uses auto in Flexbox sizing to let the browser determine a flex item’s basis.
- How deep it goes
- Defines auto and shows its flex-basis syntax, but stops short of detailing the browser’s complete sizing calculation.
- Examples
- Shows flex-basis: auto and the shorthand flex: 0 1 auto.
- What you can do after
- Apply it via CSS by choosing automatic sizing for a flex item’s basis.
Math for Web Design
auto is a CSS sizing keyword that lets the layout algorithm determine a value from available space and content constraints.
- How it is used
- Sizes CSS Grid tracks responsively from content while allowing explicit minimum and maximum constraints.
- How deep it goes
- Explains intrinsic bounds and constraint comparisons, while deferring most details of the full track sizing algorithm.
- Examples
- Demonstrates a two-column sidebar layout constrained between 150px and 300px across viewport widths.
- What you can do after
- Apply it via CSS Grid to create content-aware tracks with controlled responsive limits.
Related concepts
- height propertyconfigures · A height property specifies or reports an element’s vertical dimension.
- margin propertyconfigures · The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
- transitioncontrasts with · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- widthconfigures · Width is a measure of extent along a specified dimension, such as spatial size or the number of units or features in a model.
- minmax()used by · The CSS minmax() function defines a grid track size within specified minimum and maximum limits.
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.