スキップしてメイン コンテンツに移動

些細な日常

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)}

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

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

コメント

人気の投稿

吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす

イメージ

歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます! を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳

イメージ

十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン (1835)の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...