質問: 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の間を動くと解釈してもいいんですが、実際に動かしてみるまでわからないプログラムを書いているようで、不安な気持ちになります。
回答: `fr` 単位は、 **grid コンテナの余った空間の割合**を示します。つまり、 grid コンテナのサイズと grid トラックのサイズの差を取ったときのサイズのうち、何割を使用するかを指定出来る単位ということです。これは、伸縮しない `px` や `em` などの単位で定められたトラックのサイズが予め差し引かれる、と言い換えることが出来ます。このため、今回の場合は `fr` 単位のサイズが決定する前に、**既に `minmax` 関数のサイズは決定**しています。 以上をまとめると、トラックサイズの決定する順序は次のようになります(実際はもう少し複雑です): 1. `minmax` 関数を用いたトラック 2. `fr` 単位を用いたトラック この順序で考えると、より直感的にトラックの横幅を求めることが出来ると思います。たとえば、 grid コンテナの横幅が 500px の場合、まずは `minmax` 関数に従い一列目が 200px となり、残りの余った空間を残りの二列で等分して埋めます。Grid コンテナが 150px であるときも、始めは前例と同様に `minmax` 関数に従い、一列目が 150px となり、後の二列が `fr` 単位により決定されます。