CSSグリッドレイアウト単位のガイド

の CSSグリッドレイアウトモジュール で出荷されました 新しいCSSユニット と呼ばれる fr 単位. それができるのと同じくらい簡単, fr それは 単語の略語 “分数”. 新しいユニットにより、グリッドを比例する列または行にすばやくスライスすることができます。その結果、 完全に応答性があり柔軟なグリッド ほとんど風になる.

分数単位はグリッドレイアウトモジュールと一緒に導入されたので、どのブラウザでも使用できます。 CSSグリッドをサポート. あなたも古いブラウザをサポートしたい場合はここに素晴らしいです。 CSSグリッドポリフィル それだけでなく、あなたが使用することができます fr ユニットだけでなく他のグリッド機能.

基本的な使い方

まず、見てみましょう 基本グリッド 分数の単位を使います。下のレイアウトはスペースをに分割します 3つの等幅列 そして 同じ高さの2行.

所属HTMLは 6 div でマーク .ボックス クラス, の中 .ラッパー div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

グリッドレイアウトモジュールを使用するには、以下を追加する必要があります。 表示：グリッド。 ラッパーへのCSSプロパティ。の グリッドテンプレート列 プロパティは fr 値としての単位。の 3列の比率は1：1：1です.

グリッド行（グリッドテンプレート行 プロパティ）、私は使用しませんでした fr ラッパーの場合にのみ意味があるので、unit 高さは固定. そうでなければ、それはいくつかのデバイス上で奇妙な結果をもたらすことができます、しかしそれでも、、 fr 単位 比率を維持しますか （そしてこれは巨大です）.

の グリッドギャップ 財産 10pxグリッドを追加します 箱の間。ギャップが不要な場合は、このプロパティを削除してください。.

 .ラッパー表示：グリッド; grid-template-columns：1fr 1fr 1fr; grid-template-rows：200ピクセル×200ピクセル。グリッドギャップ：10px。 ボックス色：白。 text-align：center。フォントサイズ：30px。パディング：25px。  

上記のCSSには背景色などの基本的なスタイルは含まれていません。あなたはできる 記事の最後にあるデモで完全なコードを見つけてください。.

変化率

もちろん、1：1：1しか使えませんが あなたが望む任意の比率. 以下、私が使った 1：2：1の分数 それはまたスペースをに分けます 3列 しかし真ん中の列は 2倍の幅 他の二つのように.

私はまた価値を高めた グリッドギャップ あなたはそれがレイアウトをどのように変更するか見ることができるように。基本的には、ブラウザ ビューポート幅からグリッド間隔を差し引く （この例では、グリッドギャップは最大80pxになります） 残りの部分をスライス 与えられた分数に従って.

 .ラッパー表示：グリッド; grid-template-columns：1fr 2fr 1fr; grid-template-rows：200ピクセル×200ピクセル。グリッドギャップ：40px。  

組み合わせる fr 他のCSSユニットと

あなたはできる 組み合わせる の fr ユニットと 他のCSSユニット 同様に。たとえば、次の例では、 60％1fr 2fr 私のグリッドの比率.

それで、これはどのように機能しますか？の ブラウザはビューポート幅の60％を割り当てます 最初の列へ。次に、残りのスペースを1：2の割合に分割します。.

同じことを次のように書くこともできます。 60％13.33333％26.66667％. 率直に言って、なぜ誰かがその形式を使用したいのでしょうか。分数単位の大きな利点はそれです コードの読みやすさを向上. また、それは 完全に正確, パーセンテージ形式はまだ99.9999％までしか追加しないので.

 .ラッパー表示：グリッド;グリッドテンプレート列：60％1fr 2fr; grid-template-rows：200ピクセル×200ピクセル。グリッドギャップ：10px。  

割合とは別に, 他のCSSユニットも使えます たとえば、分数単位と一緒に pt, px, em, そして レム.

で空白を追加 fr

デザインを雑然とさせたくない場合 空白を追加する あなたのグリッドに？分数単位もそのための簡単な解決策を持っています.

ご覧のとおり、このグリッド 空の列があります それはまだ6箱すべてを保持している間。このレイアウトでは、スペースを切り上げる必要があります。 4列に 3の代わりに。だから、私たちは 1fr 1fr 1fr 1fr の値 グリッドテンプレート列 財産.

内部に空の列を追加します。 グリッドテンプレート領域 プロパティ、 ドット表記. 基本的に、このプロパティはあなたをすることができます 名前付きグリッド領域の参照. また、グリッドエリアには グリッドエリア 使用する必要があるプロパティ 各エリアごとに.

 .ラッパー表示：グリッド; grid-template-columns：1fr 1fr 1fr 1fr; grid-template-rows：200ピクセル×200ピクセル。グリッドギャップ：10px。グリッドテンプレート領域： "box-1 box-2。box-3" "box-4 box-5。box-6"; .box-1 grid-area：box-1;。 .box-2 grid-area：box-2;。 .box-3 grid-area：ボックス-3;。 .box-4 grid-area：box-4;。 .box-5 grid-area：box-5;。 .box-6 grid-area：ボックス-6;。  

空白スペース 必ずしも列を形成する必要はありません, 彼ら どこでも構いません グリッド内.

の 繰り返す（） 関数

また使用することができます fr 単位 と一緒に 繰り返す（） 関数 のために より単純な構文. , 単純なグリッドしかない場合はこれは必要ありませんが、必要なときに便利です。 複雑なレイアウトを実装する, 例えばa ネストグリッド.

 .ラッパー表示：グリッド; grid-template-columns：repeat（3、1fr）; / * grid-template-columns：1fr 1fr 1fr; * / grid-template-rows：200ピクセル。グリッドギャップ：10px。  

の 繰り返します（3、1fr） 構文 同じレイアウトになります として 1fr 1fr 1fr. 以下のレイアウトは最初の例と同じです.

もし、あんたが 乗数を増やす の中 繰り返す（） 機能あなたはより多くの列を持つことになります。例えば, 繰り返します（6、1fr） になります 6つの等しい列. この場合、私達の箱すべて 同じ行になります, これは、1つの値（200px）だけを使用するのに十分であることを意味します。 グリッドテンプレート行 財産.

 .ラッパー表示：グリッド; grid-template-columns：repeat（6、1fr）; grid-template-rows：200ピクセル。グリッドギャップ：10px。  

あなたが使用することができます 繰り返す（） 一回以上. たとえば、次の例では、最後の3列が 2倍の幅 最初の3つとして.

 .ラッパー表示：グリッド; grid-template-columns：repeat（3、1fr）repeat（3、2fr）; grid-template-rows：200ピクセル。グリッドギャップ：10px。  

あなたもすることができます 組み合わせる 繰り返す（） 他のCSSユニットと. たとえば、 200pxリピート（4、1fr）200px 有効なコードとして.

方法に興味があるなら 複雑なレイアウトを作成する CSSグリッドモジュールでは、 繰り返す（） 機能と fr ユニットRachel Andrewが、どうやったらそれができるかについて興味深いブログ投稿をしています。.

実験のためのデモ

最後に, これが私が約束したデモです。. この記事の最初の例と同じコードを使用します。それをフォークして、あなたが達成できることを見てください。 fr 単位.