frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【CSS】gridLayoutで使えるminmax()の新単位frとは

スポンサードリンク


スポンサードリンク


frはFlexible Lengthを表し

fr単位を使用するこの長さは、グリッドコンテナ内の空きスペース領域の一部を表します。例えば、2つのセルを持つ100px幅のグリッドがあるとします。1つは20pxの固定幅で指定し、もう1つは1frで指定します。この場合、空きスペースは100-20=80pxになるため、もう1つの幅は80pxで表示されます。

http://coliss.com/articles/build-websites/operation/css/how-to-use-minmax.html
ということらしいのですが、文章だとちょっとわかりづらいですね。

codepenに分かりやすいように表示してみました。

See the Pen rwMPKO by funclur (@funclur) on CodePen.


最小値はすべて100pxですが、左のボックスから順に1fr、2fr、3frとしています。
こうすることでどうなるかというと最大値の比率が1:2:3になってます。つまり、最大値で設定されてる幅がpxのボックスがあれば、frはそのサイズを引いた分の空きスペースを占領し、fr同士のボックスは数値が比率になるようです。

https://developer.mozilla.org/en-US/docs/Web/CSS/minmax