レイアウト
grid-template-columns
grid-template-columns は、グリッドの箱をいくつの列に分けるかと、それぞれの列の幅を指定します。列の幅（トラック）をスペースで区切って並べて書きます。
構文
none | <track-list> | <auto-track-list> | subgrid <line-name-list>?プレビュー
コード
.box {
display: grid;
grid-template-columns: 60px 1fr 2fr;
}コントロール
解説
値の書き方
列の幅を、左の列から順にスペースで区切って書きます（grid-template-columns: 60px 1fr 2fr）。書いた数だけ列ができ、項目は左上から順に入っていきます。
none：列を決めません。初期値です。項目は自動で作られる 1 列に縦に並び、その幅はgrid-auto-columns（初期値はauto）で決まるので、箱の幅いっぱいに広がります。- 長さ・%：その幅に固定します。% は箱の中身の幅に対する割合です。負の値は使えません。
fr：固定の幅の列や gap を引いて余った幅を、fr の数の比で分けます。1fr 2frなら 1 : 2 です。auto・min-content・max-content：中身から幅を決めます。autoは余った幅があれば伸びます。
minmax()
minmax(60px, 1fr) のように、列の幅の下限と上限を書きます。上の例は「60px より狭くならず、余った幅があれば 1fr の分だけ伸びる」列です。下限には fr を書けません。
1fr だけを書くと minmax(auto, 1fr) と同じで、中身（長い単語や画像）より狭くはなりません。中身にかかわらず等分したいときは minmax(0, 1fr) と書きます。
repeat()
同じ並びを繰り返すときは、repeat(3, 1fr) のように回数と、繰り返すトラックを書きます。repeat(2, 60px 1fr) は 60px 1fr 60px 1fr と同じです。
回数の代わりに auto-fill か auto-fit を書くと、箱の幅に入るだけ列を作ります。repeat(auto-fill, minmax(60px, 1fr)) は、箱が広がるにつれて列が増える、メディアクエリの要らない並べ方です。列の数を数えるために幅が決まっている必要があるので、繰り返すトラックには長さか % を（minmax() の下限か上限に）書きます。このページのコントロールでは、auto-fill・auto-fit を選ぶと、幅の決まらないトラックを minmax(60px, …) に書き換えます。
auto-fill：項目が足りなくても、入るだけの列を残します。auto-fit：項目の入らない列を幅 0 にたたむので、残った列が箱の幅いっぱいに伸びます。
このページのプレビューは項目が 4 つなので、箱をドラッグして広げると、列が 4 つより多くなったところで 2 つの違いが見えます。
足りない列や行
項目が書いた列より多いと、次の行に折り返します。grid-template-columns で書かなかった行は自動で作られ、その高さは grid-auto-rows で決まります（初期値は auto）。行の高さを決めるには grid-template-rows を使います。
このページで扱わない書き方
- 線の名前：
[sidebar-start] 200px [sidebar-end main-start] 1frのように、列の境目の線に名前を付けられます。grid-columnで項目を置くときに、番号の代わりに使えます。 fit-content(200px)：中身に合わせますが、書いた幅より広くはなりません。subgrid：グリッドの項目の中を、親のグリッドの列に合わせて分けます。入れ子のグリッドの列をそろえるときに使います。
このページのコントロールではまだ扱っていませんが、コードには書けます。どれも主なブラウザが対応しています。