Auto

As explained in Tiny CSS Projects

The CSS auto keyword lets the relevant layout algorithm determine a size from content and available space.

The CSS auto keyword lets the relevant layout algorithm determine a size from content and available space. Its behavior depends on where it appears: grid tracks use content requirements, while automatic margins can center a constrained element. section 2.3.3 section 4.5.3

Common layout uses include:

• Set auto as a grid track minimum so the track is at least as wide as its contained element. section 2.3.3
• Use auto as a grid track maximum to make the track behave like max-content, matching the space required by its content. section 2.3.3
• Combine max-width with left and right auto margins to center a layout when the viewport exceeds its maximum width. section 4.5.3
• Use margin: auto to center a fixed-height, maximum-width card horizontally in the browser window. section 9.2

Constrain and center a page

html { background-color: #f9f7f1; } body { max-width: 1200px; margin: 0 auto; } The maximum width prevents an extra-wide page from becoming difficult to read, while the automatic margins center it. Moving the background color to html prevents white bands outside the constrained body. section 4.5.3

Figure 2.5 Examples of using the auto keyword

Compare fixed-header and fixed-footer layouts in which an overflow area grows and shrinks with the window. section 2.3.3

How Tiny CSS Projects covers it

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.

How it connects

Connects CSS Grid, minmax(), max-content, flexible lengths, max-width, overflow, and responsive layout.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Web Design Playground, Second EditionThe CSS auto value lets the browser determine a property's value according to its layout rules and available content.
• 

  liveBookmanning.com
  Web Design PlaygroundA CSS keyword value that delegates the computed size or alignment to the browser's automatic calculation or inherited context.
• 

  liveBookmanning.com
  Math for Web Designauto is a CSS sizing keyword that lets the layout algorithm determine a value from available space and content constraints.

Compare how 4 books explain auto →

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.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.