【cssグリッドレイアウト】 frの使い方やautoとの違いを比較

最近じわじわと使われ始めているグリッドレイアウト。
frという新しいサイズ単位も加わり、autoとの違いがあやふや・・・という方もいるかと思います。

そこで今回はfrの基本的な使い方と、迷いやすいautoとの違いをわかりやすくまとめてみました。

frとは

frとは「fraction(分数の意味)」の略で、gridレイアウトを使うに当たって誕生した新しいサイズの単位です。

grid-template-columnsやgrid-template-rowsを使うとき、100px 200pxなどのピクセル単位などを使ったりしますが、わざわざスペースを何ピクセルか図ったりするのはわずらわしいですよね。

そんなときに便利なのが「fr」という単位です。

frを使うと、枠に合わせたグリッドの大きさを自動的に調整してくれます。例えば、

とする場合、枠に合うサイズの大きさのグリッドが3つ配置されます。

とする場合、2frの箇所では、1frの2つ分のサイズのグリッドが配置されます。

fr vs auto、どう違う？

frとauto、一見したところよく似ていますが、どう違うのでしょうか。

するのに対し、

します。

例えば 下の例を見ていただくと、

See the Pen css-grid auto with fr by KumonosuBlog (@kumonosublog) on CodePen.0

となっており、autoを指定している2番目のグリッドのところが、グリッド内の文字に合わせたサイズとなっているのがわかると思います。

fr単位がない場合のauto

ではfr単位がない場合のautoはどうなるかというと、

とした場合、autoは1frを指定したときと同じような働きをします。
外枠のうちの200pxを使用しているので、autoはその残りを自動的に計算したサイズとなります。

See the Pen grid-template-columns: auto auto 200px; by KumonosuBlog (@kumonosublog) on CodePen.0

これはpx単位に限らず、%、em、vwなどにしても同じです。

また、外枠の幅を100%(width: 100%;)とした場合、

にすると、自動的に50%ずつのサイズとなります。

See the Pen
grid-css auto 2 grid-template-columns: auto auto; by KumonosuBlog (@kumonosublog)
on CodePen.0

frとauto、どう使い分ける？

header、article、aside、footerの要素でレイアウトする場合、

grid-template-columns(列)で、articleとasideのサイズにfrを指定すると、外枠に合わせてグリッドのサイズを比率に応じて配置することができます。

grid-template-rows(行)で中央のグリッドの高さをvhやpxなどで決めて、headerとfooterのサイズをautoにすると、コンテンツの幅に応じてheaderとfooterを常に上下に配置することができます。

下の例を見ていただくと、

See the Pen css-grid fr　レイアウト例 by KumonosuBlog (@kumonosublog) on CodePen.0

のように、columns(列)をfrで指定して、rows(行)では中央の行(articleとsidebarがあるところ)の高さを60vh、ヘッダーとフッターの高さをautoに設定しています。

まとめ

ということで、frとautoの使い方をまとめると、

となります。