CSS minmax() 関数

定義と使用方法

CSSの minmax() CSS グリッドレイアウトに用いる関数で、最小値以上で最大値以下の範囲を定義します。

例

使用 minmax() グリッド列のサイズ範囲を定義します：

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

自分で試してみる

CSS 言語

minmax(min, max)
値 説明
min

必須。最小値。

次のいずれかのキーワード、長さ、パーセンテージ、エラストイックな値（fr）のいずれかができます：

  • auto
  • max-content
  • min-content
max

必須。最大値。

次のいずれかのキーワード、長さ、パーセンテージ、エラストイックな値（fr）のいずれかができます：

  • auto
  • max-content
  • min-content

技術的詳細

バージョン： CSS Grid Layout Module Level 2

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

相关页面

参考：CSS min() 函数

参考：CSS max() 函数

参考：CSS grid-template-columns 属性

参考：CSS grid-template-rows 属性

参考：CSS grid-auto-columns 属性

参考：CSS grid-auto-rows 属性