CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス に
.grid { display: grid; grid-template-columns: minmax(100px, 200px) 1fr 1fr; }
とその挙動が載っています。
解説は下記
ビューポートのサイズが変更されると、イエローのセルは常にこの2つの制限内で変更されます。2番目と3番目のセルは残りの空きスペースを均等に占め、最初のセルは常に100px〜200pxの幅です。
私の理解
- ブラウザの横幅が例えば500pxのとき
- 200px 150px 150px という風に分配される
- ブラウザのサイズが150pxのとき
- 100px 25px 25px という風に分配される
ブラウザのサイズが十分に大きい場合は非常に簡単で、まず左端のmaxが200pxなので、まず左端を200px確保して残りを1対1で分け合う。
ブラウザのサイズが十分に小さい場合も簡単で、まず左端に100pxを確保して残りを1対1でわけあう。
ここでわからないのが、左端が 100pxから200pxの間をとるときです。
さらにもっと言うと、上記、ブラウザのサイズが十分に小さいというごまかした表現をしましたが、100px固定になるときのブラウザの横幅もいまいちわかっていません。私がいう十分に小さいブラウザサイズとはブラウザの横幅なんpxなんでしょう?
なんだかいい感じに、100px~200pxの間を動くと解釈してもいいんですが、実際に動かしてみるまでわからないプログラムを書いているようで、不安な気持ちになります。