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

display:gridでセルの配置を決めるgrid-template-columns(列)やgrid-template-rows(行)の値のfrと%はどちらもグリッドレイアウトの全体の中の割合(占有率)を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。 グリッドレイアウトのfrの単位の特徴 トラックを分け合って隙間を全体に収める。 二つのトラックを半文字分の隙間で均等に分ける セル(横幅:トラック合わせ) セル(横幅:トラック合わせ) HTML <div class="grid-layout"> <div class="cell pink">セル(横幅:トラック合わせ)</div> <div class=&qu…