grid-template-columns

Gridレイアウトの列数と列幅を決めるプロパティ。6つの項目を並べ替え、列の本数と幅の比率を比べられます。

遊んでみよう

同じ6項目で列数と列幅を比較

123456

none

CSS

.element grid-template-columns: none;

値のパターン

列の定義 grid-template-columns

grid-template-columnsの構成要素

01track size

空白区切りで列を作る

100px 1frのように値を並べると、値の数だけ明示的な列が作られ、それぞれが列幅になります。

02fr

残りの空間を比率で分ける

frは利用できる空間の分け前です。1fr 2frなら、残った空間をおよそ1対2で分けます。

03repeat() + minmax()

繰り返しと幅の範囲を使う

repeat()で同じ列を簡潔に書き、minmax()で列が縮める幅と広がれる幅を指定できます。

早見表

初期値はnoneです。grid-template-columnsはGridコンテナーへ指定し、空白で区切った値の数と幅で明示的な列を作ります。

01none明示的な列を作らない初期値

02180px 1fr固定幅と残りの幅2列

031fr 2fr残りの空間を1対2で分ける比率

04repeat(3, 1fr)等幅の列を3回繰り返す3列

05minmax(160px, 1fr)最小幅と最大幅を決める幅の範囲

06repeat(auto-fit, minmax(160px, 1fr))コンテナー幅に応じて列数を変えるレスポンシブ

07[main] 2fr [side] 1frグリッド線へ名前を付ける線名

よくある使い方

本文とサイドバーを分ける

本文を広く、補助情報を狭くした2列レイアウトを、frの比率で柔軟に作れます。

.layout { display: grid; grid-template-columns: 2fr 1fr; }

カードを同じ幅で並べる

repeat()を使うと、同じ幅の列を必要な本数だけ簡潔に作り、カードを整列できます。

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }

幅に応じて列数を変える

auto-fitとminmax()を組み合わせると、列の最小幅を守りながら入るだけ並べられます。

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

ポイント

まずdisplay: gridでGridを始めよう。

grid-template-columnsが列を作るのは、display: gridまたはinline-gridのコンテナーです。値を空白で区切るたびに列が増え、子要素は既定で左上から順に入ります。frは固定幅やgapを除いた利用可能な空間を分けます。長い内容で列が広がりすぎる場合は、1frの代わりにminmax(0, 1fr)を使うと縮めやすくなります。明示した列からはみ出す項目には暗黙の列や行が作られます。このプロパティは子要素へ継承されません。