CSSグリッドレイアウト：Frユニット

序章

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つの列はそれぞれ同じ量のスペースを占有します。

frを使用した例

これは、frの値が異なる上記の同じ例です。 レイアウトの変更に注意してください。

.container {
  /* ... */

  grid-template-columns: 1fr 1fr 40px 20%;
  grid-template-rows: 100px 200px 100px;

  /* ... */
}

---

次の最後の例では、サイドバーアイテムは2frをカバーしているため、1列目と2列目にまたがるアイテムと同じ幅になります。

.container {
  /* ... */

  grid-template-columns: 1fr 1fr 40px 2fr;
  grid-template-rows: 100px 200px 100px;

  /* ... */
}

混合ユニット

前の例で見たように、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;
}