誰もがCSSグリッドの印象を積極的に共有しているが、CSSの新しい長さの単位-fr （ 仕様を参照）について誰もあまり言わない。 そして今、ブラウザがより良くそれをサポートし始めているので、多くの利点を与えてくれるので、このレイアウト手法と組み合わせてどのように使用できるかを見ていくべきだと思います。 主なものは、より理解しやすく、保守しやすいコードです。
始める前に、通常CSSでグリッドを作成する方法を見てみましょう。 次の例では、同じ幅の4列のグリッドを作成します。
<div class="grid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
.grid { display: grid; grid-template-columns: repeat(4, 25%); grid-column-gap: 10px; }
grid-template-columnsプロパティの値としてrepeat（）関数を使用したことがない場合は、最もエレガントなCSSグリッド機能の1つを紹介します。 これは短いエントリです。 本質的には、繰り返される値をより詳細に記述することができます。 代わりに、 grid-template-columnsを作成できます。25％25％25％25％; ただし、かなり長いminmax（）式で幅を定義する場合は特に、 repeat（）を使用する方が便利です。
構文は次のとおりです。
繰り返し（列/行の数、必要な列幅）;
しかし、実際にはいくつかの問題があります。
まず、このCSS関数を使用するには、少し計算する必要がありました。 グリッドの合計幅（100％）を目的の列数（4）で割った場合に得られる量を計算する必要がありました。 25％を得ました。 この例では、計算は非常に単純であり、問題は発生しませんが、より複雑な例では、計算する必要を完全に回避し、ブラウザーに実行させることができます。 calc（）関数があるので、次のように書くことができます： repeat（4、calc（100％/ 4）） 、それでも少し奇妙であり、いずれにしても別の問題があります...
2番目の問題はオーバーフローです。 各列の幅を25％に設定し、 grid-column-gapを10pxに設定するため、 グリッド全体が100％より広くなります。 上記のコードを入力することでこれを期待することはできませんが、それがパーセンテージ値の仕組みです。 実際、ここでは次のように言っています。「各列の値をビューポートの幅の25％に設定し、それらの間の距離を10pxにする必要があります。」 これは私たちの予想と大差ありませんが、レイアウトに大きな問題を引き起こします。
誤って、水平スクロールを作成しました。
そして、これがfrユニットが私たちを助ける場所です。
fr単位（「小数部」）は、 ％ 、 px 、 emなど、CSSの他の長さの単位と同じ方法でグリッドを作成するために使用できます。 コードを編集して、新しい値を設定してみましょう。
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 10px; }
結果は前の例と同じになります。この場合、4つの列のそれぞれに小数部分（1/4または25％）に等しい幅を与えるからです。 しかし！ 各列の幅を1frに決定すると、これらの10pxが自動的に考慮され、最終列幅から差し引かれるので、x軸のオーバーフローを取り除きました。
パーセントやピクセルでうまくいくことができるのに、なぜこの新しいCSSユニットを使用することを学ぶ必要があるのでしょうか？ さて、より複雑なCSSグリッドの例を見て、 frを使用することが依然としてより良い選択肢である理由を見つけましょう。 新しい例では、左側のナビゲーションブロックの後に12列のグリッドを配置するとします。これは次のようになります。
これは、多くのUIにとって非常に一般的な方法です。 このような場合にfrを使用すると、別のグリッドを作成したり、 calc（）を介してcalcを台無しにしたりする必要がなくなります。 結局、上記の例でfrに頼らなかった場合、次の計算を実行する必要があります。
各列の幅=（（表示領域の幅-ナビゲーションバーの幅）/列の数）* 1％
もちろん、これはクランクアップされたかもしれませんが、涙なしでそれを見ることさえ難しいです。 さらに、ナビゲーションブロックの幅を変更する必要がある場合は、同様の計算を再度実行する必要があります。 代わりに、 frは非常に人目をひく最もわかりやすいコードを提供します。
.grid { display: grid; grid-template-columns: 250px repeat(12, 1fr); grid-column-gap: 10px; }
ここでは、最初の列にピクセル単位の固定幅を指定し、別の12列を作成します。 それらのそれぞれについて、幅は1つの「空き領域の小数部」（仕様の文字通りの表現）で決定されます。 しかし、今ではクレイジーな計算の必要はありません！ コードはかなり明確で、左側のナビゲーションブロックの幅を変更すると、右側の列の幅が自動的に調整されます。
インターフェースを保守しやすくするために、多くの労力と時間を費やす必要はありませんでした。 また、他の多くの作業をまだ待っている将来の開発者にとって、コードをより理解しやすくしました。
同僚は何を共有していますか
frを他の長さの単位とともに使用すると、良い結果が得られます。 固定サイドバーと、残りのスペースを占めるメインコンテンツエリアを想像してください。grid-template-columns：200px 1fr; 。 簡単！
Alligator.ioで複数のユニットを使用する良い例は次のとおりです。
.container { /* ... */ grid-template-columns: 1fr 1fr 40px 2fr; grid-template-rows: 100px 200px 100px; /* ... */ }
レイチェル・アンドリューはfrユニットに関するビデオを共有しています：
アンナ・モナスは、この単元に関する素晴らしい記事を提供しています。
「 frユニットは、他のCSS長さユニットでも使用できます。 以下の例では、グリッドに60％1fr 2frの比率を使用しました。
frユニットを長く生きてください！