`grid-template-columns` tells a grid container how many columns to make and how wide each one should be. Think of it as laying strips of tape across a floor: each value marks out one vertical lane. Use it on an element after turning that element into a grid with `display: grid`. section 13.3
container {
display: grid;
grid-template-columns: col-values;
grid-template-rows: row-values;
}
Start with the template pattern: put a space-separated column-size list after `grid-template-columns`. Each listed value creates one column. section 13.3
Column values may use standard CSS units such as `px`, `em`, `rem`, `vw`, and `vh`, as well as percentages or `auto`. The `auto` keyword lets the browser determine a column’s size from the other values. For a column that should be only as wide as its widest item, use `max-content`. section 13.3
PLAY: Three fixed columns
This template creates three columns: 100 pixels, 200 pixels, and 300 pixels wide. The three values are not decoration—each one is a separate column definition. `.container { display: grid; grid-template-columns: 100px 200px 300px; grid-template-rows: 100px 150px; }` Rows are defined separately with `grid-template-rows`. If rows are omitted, the browser makes each row tall enough for the tallest item in it. section 13.3 section 13.3
For flexible layouts, use `fr`, short for a fraction of the free space in the grid container. Rather than assigning every column the same fixed pixel width, `fr` shares whatever horizontal room remains after other column sizes are handled. If a long run of equal-sized tracks gets tedious, `repeat()` can replace the repeated list. section 13.10 section 13.10
MASTER: Center a content column
A useful three-column template is `1fr auto 1fr`. The center column sizes itself to its content; the two outer columns divide the remaining space equally. Put the content container in column 2 with `grid-column: 2`, and it sits in the middle without any centering acrobatics. `body { display: grid; grid-template-columns: 1fr auto 1fr; } .container { grid-column: 2; }` Grid handles the page-level centering here, while the nested content container can use Flexbox for its own single-column arrangement. section 20.5 section 20.5
REMEMBER: A column template works with the rest of Grid, not in a lonely CSS vacuum:
- Use `column-gap` to add gutters between columns, and `row-gap` for space between rows. section 13.10
- Use `grid-column-start` and `grid-column-end` to choose the columns where an item appears. section 13.10
- Use `grid-template-areas` and `grid-area` when named layout areas are more readable than column numbers. section 13.10
