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

Pagine correlate

Riferimento:Funzione min() CSS

Riferimento:Funzione max() CSS

Riferimento:Proprietà CSS grid-template-columns

Riferimento:Proprietà CSS grid-template-rows

Riferimento:Proprietà grid-auto-columns CSS

Riferimento:Proprietà grid-auto-rows CSS