Autoprefixerで使うCSS Grid Layout

fr は fraction（欠片、分数などの意）の略で、アイテムを配置したあとでまだスペースが残っている場合に、どのように割り振るかを指定します。

.grid-container {
	grid-template-columns: 1fr 200px;
	grid-template-rows: auto;
}

ここでは2番目が 200px 固定で指定されているので、1番目の幅はグリッドコンテナーの幅 - 200px となります。

複数の fr を一度に指定すると、余りの幅をどんな比率で分けるかを決められます。

.grid-container {
	grid-gap: 1rem;
	grid-template-columns: 1fr 2fr 3fr auto;
	grid-template-rows: auto;
}

この場合、コンテナー幅から 4番目の幅（auto なのでコンテンツ幅）と3つの gap を差し引いた余りを 1:2:3 で割り振ります。

行の高さと列の幅を 1fr に揃えても、正方形にはなりません。これは、行は行、列は列でそれぞれ fr の計算がなされるからです。

.grid-container {
	grid-gap: .5rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

実際に columns と rows に fr を並べてみると、バラバラに計算されているのが分かります。

.grid-container {
	grid-template-columns: 1fr 2fr 3fr 4fr;
	grid-template-rows: 2fr 1fr;
}

いかがでしたでしょうか。この記事で少しでもグリッドレイアウトに興味を持ってくだされば幸いです。

モダンブラウザに実装されているグリッドレイアウトはもっともっとパワフルな機能を備えています。ここでは IE でも使える範囲でしかご紹介できませんでしたが、その他の機能を見てみたいという方は、Becoming a CSS Grid Ninja! という面白い記事があるので、是非読んでみてください。

Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年）
https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc

ページ: 1 2 3 4

CSS