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 屬性