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

些細な日常

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

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

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

コメント

最近の投稿

日付: 

目眩の薬から黒い虫が歩いているなどの幻覚を起こす場合がある

イメージ

人気の投稿

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

イメージ

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

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...