grid-template-columns

レイアウト・配置

グリッドコンテナの列のサイズと数を定義するプロパティです。

構文

Syntax
grid-template-columns: <track-size> ... | <line-name> <track-size> ...

コード例

例 1

grid-template-columns: 1fr 1fr 1fr;
実行結果
1
2
3

3つの等幅（同じ幅）の列を作成します。例えば3カラムのレイアウトや、カードを均等に並べたい時に使います。

例 2

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
実行結果
1
2
3
4

列の数を自動調整し、各列の最小幅を300px、最大幅を等分（1fr）にします。画面幅に応じてカラム数が増減するレスポンシブなグリッドが簡単に作れます。

💡 TIPS

repeat()とminmax()を組み合わせるとレスポンシブなグリッドが簡単に作れる。

関連プロパティ

ブラウザサポート

IE11+（一部制限あり）, 全モダンブラウザ