Use `grid-template-columns` on a grid container to define how many columns it has and how wide they are. Its value is a space-separated list of column tracks—the spaces between vertical grid lines. Start by setting `display: grid` on the parent element. section 2.3 section 2.7
Two flexible columns and one fixed column
The declaration `grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px;` creates three columns: two equally flexible columns followed by a 250-pixel column. `repeat(2, …)` avoids writing the same track size twice. For the first two columns, `minmax(auto, 1fr)` uses the contained element’s width as a minimum and a fraction of available space as the flexible size. section 2.3.1 section 2.3.3
Think of `fr` values as shares of the space available to flexible tracks. `1fr 1fr 1fr 1fr` gives four columns equal shares; `3fr repeat(3, 1fr)` gives the first column three shares and each remaining column one. Grid distributes leftover space after minimum sizes have been applied. section 2.3.4
Listing 2.4 Setting the amount of columns
main {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px;
}
See the complete `main` rule with `display: grid` and its three-column track list. section 2.3.4
