minmax()

minmax()の値には、適用する要素の最小値と最大値を指定することができます。

minmax(min, max)

min, maxにはには、次の値を利用できます。

1,px単位
2,%単位
3,fr単位
4,auto
5,max-content
6,min-content

.example {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr 1fr;
}

ビューポートのサイズを変更すると、
最初の要素は100px〜200pxの間の幅になり、2番目と3番目の要素は残りの空きスペースを均等に占めるように横幅を可変させます。

IE, Edgeではベンダプレフィックス（-ms-）を加える必要がありますが、
minmax()はすべてのブラウザにサポートされています。