fr単位
フレキシブル単位 fr は、
要素が配置されているスペース全体の割合（フラクション）を表します。
fr を使用する利点は、
異なるコンテナや画面解像度への適応性にあります。
なぜなら、fr は単に全体のスペースを指定された数のフラクション（部分）に分配するだけで、
ピクセル単位での正確なサイズに縛られないからです。
例
grid-template-columns プロパティを使用して、
グリッドの最初の2列がコンテナの1つの部分を占め、
3列目が3つの部分を占めるようにしてみましょう：
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
box-sizing: border-box;
border: 1px solid #696989;
}
:
例
fr 単位で指定される値は小数形式を取ることができます。
前の例を変更し、2列目と3列目の幅を小数で指定してみましょう：
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
