minmax()最小値と最大値の範囲を決めてサイスを指定する
minmax() 関数は、グリッドレイアウトで使用することで、最小値と最大値の間で幅、または高さを指定することができます。
引数は 2つの値をカンマで区切って指定します。例えば、minmax(400px, 50%) と指定したとき、最小値は 400px、最大値は 50% となり、この範囲内で幅や高さが算出されます。
引数には <length>（長さ）、<percentage>（%）、<flex>（fr 単位）、およびキーワードとして auto、min-content、max-content が指定可能です。
詳細説明
min-content
グリッドアイテムがとりうる最小値を幅、もしくは高さとして指定します。
max-content
グリッドアイテムがとりうる最大値を幅、もしくは高さとして指定します。
auto
最大の幅、もしくは高さはグリッドアイテムがとりうる最大値、最小の幅、もしくは高さはグリッドアイテムがとりうる最小値を指定しますが、最大の幅、もしくは高さは align-content や justify-content プロパティによる拡大を許容します。
minmax()のサンプルソース
.sample-grid {
display: grid;
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
grid-template-rows: 1fr minmax(min-content, 1fr);
}
主要ブラウザの対応
| IE11 | × |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |