暗黙の列トラックプロパティ

最終更新：2026-09-13

grid-auto-columns 暗黙の列トラックプロパティ

grid-auto-columns プロパティは、グリッドコンテナ内で暗黙的に作成される列トラックの幅を制御します。grid-template-columns が定義していない列にグリッドアイテムが配置されると、ブラウザは自動的に暗黙の列を作成します。このプロパティはその自動作成された列のサイズを設定します。動的コンテンツやグリッドアイテム数が不確定な場合に非常に便利です。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

grid-auto-columns: <track-size>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	自動的に計算される
`<length> \| <percentage>`	タイプ	固定の暗黙列幅
`minmax()`	関数	最小値/最大値のサイズ

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： 暗黙の列は、通常、アイテムが明示的グリッドの外の列に明示的に配置されたために生じます。

ヒント： minmax(100px, auto) は、暗黙の列に最小幅を与えつつ、コンテンツに合わせて伸縮させます。

❓ よくある質問

Qgrid-auto-columns と grid-template-columns はいつ同時に適用されますか？

Aグリッドアイテムが grid-template-columns が定義していない列に配置されるたびに暗黙の列が作成され、grid-auto-columns がそれらの追加列の幅を決定します。例えば、定義された列が 2 つだけの場合、3 番目のアイテム（自動配置でも grid-column で列 3 に配置されても）は暗黙の列に入ります。明示的列と暗黙列は共存でき、それぞれ独自のサイズ規則に従います。

Q列数が不固定でもすべての列を同じ幅にするにはどうすればよいですか？

Agrid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) を使います。ブラウザはコンテナ幅から列数を決定します。各列は最小 200px で、余白があるときは伸縮します。auto-fill は収まるだけの 200px 最小トラックを作成するため、余分な列は作られず、メディアクエリなしでブレイクポイント全体にわたりレスポンシブなグリッドになります。gap と組み合わせることで、列数が適応し幅が統一されたグリッドが得られます。

Q暗黙の列はいつ作成されますか？

A暗黙の列は、アイテムが明示的列の外に配置されると現れます。例えば、列が 2 つだけのコンテナでは、3 番目のアイテムは自動配置されると列 3 に入り、あるいは grid-column: 4 で明示的に列 4 に配置されます。これらの追加列は暗黙であり、その幅は grid-auto-columns から来ます。横スクロールするリストはこれをよく使います。最初の列だけを明示的にし、残りを grid-auto-columns に任せます。