CSSグリッドレイアウト:Frユニット
提供:Dev Guides
序章
CSSグリッドレイアウトを使用すると、新しい柔軟なユニットであるFrユニットが得られます。 Frは分数単位であり、1frは使用可能なスペースの1つの部分を表します。 以下は、動作中のfrユニットのいくつかの例です。 これらの例のグリッドアイテムは、グリッド領域のあるグリッドに配置されます。
.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 200px 100px; grid-template-areas: "head head2 . side" "main main2 . side" "footer footer footer footer"; }
4つの列はそれぞれ同じ量のスペースを占有します。
頭
ヘッド2
主要
メイン2
側
フッター
frを使用した例
これは、frの値が異なる上記の同じ例です。 レイアウトの変更に注意してください。
.container { /* ... */ grid-template-columns: 1fr 1fr 40px 20%; grid-template-rows: 100px 200px 100px; /* ... */ }
頭
ヘッド2
主要
メイン2
側
フッター
次の最後の例では、サイドバーアイテムは2frをカバーしているため、1列目と2列目にまたがるアイテムと同じ幅になります。
.container { /* ... */ grid-template-columns: 1fr 1fr 40px 2fr; grid-template-rows: 100px 200px 100px; /* ... */ }
頭
ヘッド2
主要
メイン2
側
フッター
混合ユニット
前の例で見たように、fr値を固定値およびパーセンテージ値と混合できます。 fr の値は、他の値が取った後に残っているスペースに分割されます。
たとえば、次のスニペットのように4列のグリッドがある場合、最初の列は300ピクセル、2番目の列は80ピクセル(10 % o f 800ピクセル)、3番目と4番目の列は210ピクセルになります(それぞれが半分を占めます)残りのスペース):
main { width: 800px; display: grid; grid-template-columns: 300px 10% 1fr 1fr; /* 300px 80px 210px 210px */ grid-template-rows: auto; }