CSS実装時に詰まったので備忘録的に。
.sample-1{
display: grid;
grid-template-columns: 2fr 1fr;
}
.sample-2{
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}この2つの差、わかりますか？
多分このページに行き着いた方はこの2つの差を把握しきれていないんだと思います。私がそうだったので書いてます……。
実際に実装するとこうなります。
これは指定した割合からはみ出す長い要素です。
1frの要素
grid-template-columns: 2fr 1fr;
これは指定した割合からはみ出す長い要素です。
1frの要素
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
……という感じで、minmax()関数で指定してあげると、要素は子要素の大きさに合わせて収縮することなく、frで指定した割合を保ってくれます。子要素に対してmax-widthなどを指定する必要は一切ありません。
なんで？
fr単位はグリッドコンテナーの余った空間の割合を表します。
sample-1のように、単にgrid-template-columns: 2fr 1fr;と指定すると、余っている空間を2fr,1frになるように割り当てます。そのあと、幅を割り当てられた子要素は、自身より大きな幅を持つ子要素に合わせて自身の幅を引き伸ばそうとしてしまいます。この時、同時にグリッドレイアウトのトラックの位置も動いてしまいます。
そこでsample-2のようにminmax関数で最大値として指定してやると、子要素の引き伸ばしに対してトラックの最大値が指定されているため、子要素は大きさを変えることができず、こちらの意図したとおりのレイアウトが維持される、というわけです。
理解するのに結構時間がかかった仕様でした。
