Grid-auto-columns

As explained in CSS in Depth, Second Edition

The CSS grid-auto-columns property specifies the size of implicitly created grid columns.

grid-auto-columns sets the size of columns the browser creates when grid items extend beyond the explicitly declared grid tracks. Without it, implicit columns use auto sizing and grow to contain their contents. section 5.4

Sizing an implicit column

A grid with one explicit column can size any additional automatically created columns with: .gallery { display: grid; grid-template-columns: 12rem; grid-auto-columns: 1fr; } If an item is placed in a second column, that implicit column receives the 1fr size. section 5.4

Figure 5.11 If a grid item is placed outside the declared grid tracks, implicit tracks will be added to the grid until it can contain the item.

See how placing an item outside the declared tracks causes implicit tracks to be added until the grid can contain it. section 5.4

How CSS in Depth, Second Edition covers it

How deep it goes

Defines the browser’s implicit-track sizing rule and contrasts it with the default auto size, without detailing the full placement algorithm.

Examples

Demonstrates a grid item placed in a second track and a portfolio whose automatically added tracks adapt to changing content.

What it assumes

Assumes explicit grid tracks and grid-item placement, while explaining how implicit tracks arise when those tracks are exceeded.

What you can do after

Apply it via CSS to give consistently sized columns created outside the explicit grid.

How it connects

Connects explicit grid, implicit grid, grid-template-columns, grid-auto-rows, and automatic item placement.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• implicit gridconfigures · An implicit grid is the set of CSS Grid tracks automatically created beyond those explicitly defined to place grid items.
• grid-template-columnsconfigures · The CSS grid-template-columns property defines the sizes and optional names of a grid’s column tracks and grid lines.
• grid-auto-rowscontrasts with · The CSS grid-auto-rows property specifies the sizes of implicitly created grid rows.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.