CSS Gridレイアウト入門：「fr」でのサイズ指定

Gridレイアウトで幅指定をする際に「fr」という値を使えます。

上記のグリッド指定のCSSは以下のようにしています。

grid-template-columns: 1fr 2fr 3fr 1fr;
grid-template-rows: 1fr 2fr 3fr;

横に1fr,2fr,3fr,1frの指定、縦に1fr,2fr,3frの指定です。
これは「塩1:砂糖2」みたいな相対的割合を自動で適用する指定方法になります。

横の列の場合「1+2+3+1=7」なので、1/7, 2/7, 3/7, 1/7というサイズを割り当てられます。

縦の行も解釈は同じなのですが、今回は縦幅を設定していないため1frを基準に2倍、3倍の高さになっています。

所感

大枠のレイアウトは通常pxの固定値かautoを使うので出番が無さそうですが、リストや表などコンテンツをレイアウトする際には使いやすいと思えます。