CSS Reference

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 ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome