grid-template-columns

Values

Write the column widths from left to right, separated by spaces (grid-template-columns: 60px 1fr 2fr). Each size makes a column, and items fill them in order from the top left.

• none: no columns are set. This is the initial value. Items stack in one automatically created column whose width comes from grid-auto-columns (initially auto), so it spans the box.
• Lengths and percentages: a fixed width. Percentages are of the width of the box's content. Negative values are not allowed.
• fr: shares the width left over after fixed columns and gaps, in the ratio of the fr values. 1fr 2fr is 1 : 2.
• auto, min-content and max-content: the width comes from the content. auto grows when there is width left over.

minmax()

minmax(60px, 1fr) gives a column a minimum and a maximum width. This one never gets narrower than 60px and takes a 1fr share of any width left over. The minimum cannot be in fr.

1fr on its own means minmax(auto, 1fr), so the column never gets narrower than its content (a long word or an image). To split the width equally whatever the content, write minmax(0, 1fr).

repeat()

To repeat a pattern, write the count and the tracks, as in repeat(3, 1fr). repeat(2, 60px 1fr) is the same as 60px 1fr 60px 1fr.

With auto-fill or auto-fit instead of a count, the grid makes as many columns as fit in the box. repeat(auto-fill, minmax(60px, 1fr)) adds columns as the box gets wider, with no media queries. The browser needs a definite width to count the columns, so the repeated tracks must have a length or percentage (as the minimum or maximum of minmax()). In the controls on this page, choosing auto-fill or auto-fit rewrites tracks without a definite width as minmax(60px, …).

• auto-fill: keeps every column that fits, even when there are not enough items to fill them.
• auto-fit: collapses columns with no items to zero width, so the remaining columns stretch across the box.

The preview on this page has four items, so drag the box wider until there are more than four columns to see the difference.

Extra rows

Items that do not fit in the columns wrap onto the next row. Rows that grid-template-columns does not set are created automatically, with heights from grid-auto-rows (initially auto). Use grid-template-rows to set row heights.

Not covered on this page

• Line names: [sidebar-start] 200px [sidebar-end main-start] 1fr names the lines between columns. grid-column can then place items by name instead of number.
• fit-content(200px): fits the content, but never wider than the given width.
• subgrid: divides a grid item using its parent grid's columns, to line up the columns of nested grids.

The controls on this page don’t cover these yet, but you can type them into the code. All major browsers support them.