grid-template-columns 列トラックプロパティ

最終更新：2026-09-13

grid-template-columns grid-template-columns 列トラックプロパティ

grid-template-columns プロパティは、グリッドコンテナ内の列トラックの数と幅を定義します。各列トラックのサイズを指定することで列構造を正確に制御でき、CSS Grid の中心となる設定の一つです。固定長、パーセント、fr 単位、そして repeat() や minmax() といった強力な関数をサポートします。

カテゴリ
初期値	none
継承	いいえ
適用対象	すべての要素
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

grid-template-columns: none | <track-list> | <auto-track-list>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	明示的な列トラックなし
`<track-list> \| <auto-track-list>`	タイプ	トラックリスト
`repeat()`	関数	繰り返しトラック定義

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
grid-template-columns	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： fr（fraction）単位は利用可能な空間の一つ分を表します。たとえば 1fr 2fr は残りの空間を 1:2 の比率で 2 つの列に分割します。

ヒント： repeat(3, 1fr) は 1fr 1fr 1fr と同じで、多数の繰り返しトラックを書く場合にずっと簡潔です。

❓ よくある質問

Qgrid-template-columns と grid-auto-columns の違いは何ですか？

Agrid-template-columns は明示的に宣言された列トラック（グリッドの主構造）を定義します。grid-auto-columns は暗黙的な列の幅を制御します。グリッドアイテムが明示的な列の範囲を超えて配置されると、ブラウザが自動的に作る追加の列が暗黙的な列になります。たとえば列を 2 つだけ定義した場合、3 つ目以降のアイテムは grid-auto-columns が管理する暗黙的な列に入ります。

Qminmax(200px, 1fr) はどういう意味ですか？

Aminmax() はトラックサイズの範囲を指定します。最小 200px、最大 1fr です。つまりその列は最低 200px の幅があり、余裕があるときは 1fr に従って伸び、スペースが足りないときは 200px を維持します。よく repeat(auto-fill, minmax(200px, 1fr)) と組み合わせて、ブラウザがコンテナ幅から列数を決定するメディアクエリ不要のレスポンシブグリッドを作ります。

Qauto-fill と auto-fit の違いは何ですか？

Aどちらも repeat() と組み合わせて列数をコンテナ幅に応じて変化させます。auto-fill は配置するコンテンツがなくても空きトラックを作り続けるため列幅が安定します。auto-fit は空きトラックを 0 に折りたたみ、コンテンツのある列を全体の行いっぱいに伸ばします。同じ幅なら auto-fit のほうがコンテンツ列が広く、行を埋めるカードに適しています。auto-fill は固定列幅を保ちたいレイアウトに向いています。