Layout
grid-auto-columns
grid-auto-columns sets the width of columns that grid-template-columns does not set, that is, the columns added automatically to fit the items.
Syntax
<track-size>+Preview
Code
.box {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 40px 1fr;
}Controls
About
Automatically added columns
When items are placed down the columns with grid-auto-flow: column, or an item is placed to the right of the written columns, the browser adds columns to the right. grid-auto-columns sets their width.
With the initial grid-auto-flow: row, rows are added instead. If no columns are set at all, a single column is created automatically and gets its width from grid-auto-columns, but once grid-template-columns sets the columns it has no effect unless an item is placed outside them (use grid-auto-rows for the row heights).
Values
Write the column width. The values are the same as for grid-template-columns: lengths, percentages, fr, auto, min-content, max-content and minmax(). The initial value is auto, which fits the content (and grows if the box has width to spare).
With several widths separated by spaces, the added columns use them in order and start over after the last one. 40px 1fr alternates 40px columns and 1fr columns.
A horizontal list
Combining grid-auto-flow: column and grid-auto-columns: 200px with overflow-x: auto lines up any number of items in equal-width columns, scrolling sideways when they overflow.
The preview on this page sets display: grid and grid-auto-flow: column as helper declarations, with no columns set, and places four items. Each item adds a column, so you can see the widths of the four columns change.
Not covered on this page
The controls on this page don’t cover fit-content() yet, but you can type it into the code. repeat() and none are not allowed in grid-auto-columns.