CSSのグリッドレイアウトのfrと%の違い

display:gridでセルの配置を決めるgrid-template-columns（列）やgrid-template-rows（行）の値のfrと%はどちらもグリッドレイアウトの全体の中の割合（占有率）を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。

グリッドレイアウトのfrの単位の特徴

トラックを分け合って隙間を全体に収める。

二つのトラックを半文字分の隙間で均等に分ける

セル（横幅：トラック合わせ）

セル（横幅：トラック合わせ）

HTML

<div class="grid-layout">
<div class="cell pink">セル（横幅：トラック合わせ）</div>
<div class="cell cyan">セル（横幅：トラック合わせ）</div>
</div>

CSS

.grid-layout {display:grid;grid-template-columns:1fr 1fr;gap:1em}
.cell {width:100%;height:min(33vw, 597px);display:grid;justify-content:center;align-items:center}
.pink {background-color:#ffc0cb}
.cyan {background-color:#00ffff}

frはグリッドレイアウトで最も使い易いと思うし、そのためにあるような単位だ。

トラックの大きさが指定された分のセルの割合できっちり与えられてgapを付けたときも加味されて全体の大きさが増えることはない。

たとえセルに固定サイズがあって全体からはみ出すとしてもセル同士の占有率が変わることはない。

トラックの占有率はセルがはみ出しても変わらない

セル（横幅：固定サイズ）

セル（横幅：固定サイズ）

HTML

<div class="grid-layout">
<div class="cell pink">セル（横幅：固定サイズ）</div>
<div class="cell cyan">セル（横幅：固定サイズ）</div>
</div>

CSS

.grid-layout {display:grid;grid-template-columns:1fr 1fr;gap:.5em;overflow:auto}
.cell {width:min(80vw, 736px);height:min(33vw, 597px);display:grid;justify-content:center;align-items:center}
.pink {background-color:#ffc0cb}
.cyan {background-color:#00ffff}

複数のセルがトラックからはみ出してもそれぞれの占有率は変わらず、互いに並び合って隙間も維持される。

全体の表示領域に対しては前のセルが完全に優先されて後のセルが押し出されるような形でそれぞれの割合が保たれずに表示される。

グリッドレイアウトの%の単位の特徴

トラックの割合を保って隙間を全体に収めない。

二つのトラックを半文字分の隙間で均等に分ける

セル（横幅：トラック合わせ）

セル（横幅：トラック合わせ）

HTML

<div class="grid-layout">
<div class="cell lime">セル（横幅：トラック合わせ）</div>
<div class="cell cyan">セル（横幅：トラック合わせ）</div>
</div>

CSS

.grid-layout {display:grid;grid-template-columns:calc(50% - .25em) calc(50% - .25em);gap:.5em}
.cell {width:100%;height:min(33vw, 597px);display:grid;justify-content:center;align-items:center}
.lime {background-color:#00ff00}
.orange {background-color:#ffa500}

セルがトラックの割合を占めて複数でトラックを分け合うことがない。

gapを付けたときに全体の長さに加算されてしまうので、全体の大きさを維持するにはトラックから差し引かなくてはならない。

トラックの値に計算式のcalc()を使うとgapの分だけトラックの長さを減らすことができる。

トラックから隙間を差し引く計算式

calc(トラックの割合 - 隙間 / トラック数)

個々のトラックの割合から隙間の長さを均等に減らしておけば全体の幅にぴったり合わせて全てを収められる。

例えば二つのトラックを半分ずつにして.5emの隙間を付けて全体にぴったり合わせるならばcalc(50% - .25em) calc(50% - .25em)という値を入力することになる。

セルに固定サイズがあって全体からはみ出すとセル同士の占有率が変わってしまう。

トラックの占有率はセルがはみ出すと変わる

セル（横幅：固定サイズ）

セル（横幅：固定サイズ）

HTML

<div class="grid-layout">
<div class="cell lime">セル（横幅：固定サイズ）</div>
<div class="cell cyan">セル（横幅：固定サイズ）</div>
</div>

CSS

.grid-layout {display:grid;grid-template-columns:calc(50% - .25em) calc(50% - .25em);gap:.5em;overflow:auto}
.cell {width:min(80vw, 736px);height:min(33vw, 597px);display:grid;justify-content:center;align-items:center}
.lime {background-color:#00ff00}
.orange {background-color:rgba(255, 165, 0, 0.5)}

セルがトラックからはみ出すと占有率が変わり、複数で重なり合って隙間も維持されない。

全体の表示領域に対してはセルの割合が保たれるけれども隙間があると前のセルの余りが後のセルへと延びるために消されてずれたように見える。