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

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

frとは

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

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

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

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

grid-template-columns: 1fr 1fr 1fr;

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

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

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

fr vs auto、どう違う?

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

frは、
外枠の大きさに対して自動でグリッドを分割してそのサイズを調整

するのに対し、

autoは、
同じ列または行にfr単位がある場合、グリッドの中のコンテンツのサイズに合わせてグリッドサイズを調整

します。

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

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

grid-template-columns: 1fr auto 1fr;

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

fr単位がない場合のauto

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

grid-template-columns: auto auto 200px;

とした場合、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%;)とした場合、

grid-template-columns: auto auto;

にすると、自動的に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

grid-template-columns: 3fr 1fr;
grid-template-rows: auto 70vh auto;

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

まとめ

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

frは外枠のサイズに合わせてグリッドを分割し、そのサイズを自動で調整する。

autoは同じ列や行にfrがある場合、グリッド内のコンテンツの幅に合わせてサイズを調整する。

grid-template-columns: 1fr 1fr 1fr;とした場合
  外枠のサイズに合わせたグリッドが3つ配置される。

grid-template-columns: 1fr 2fr;とした場合
  2frは1frの2倍の大きさのグリッドが配置される。

grid-template-columns;grid-template-row;にfrが含まれていない場合 (%,em,rem,vw,pxなど)
  autoはfrと同じ働きをする。

外枠のサイズが100%として、grid-template-columns: auto auto;とした場合
  自動でグリッドを半分のサイズに調整する。

となります。

この記事が気に入ったら
いいね!しよう

Follow on Twetter !