CSS minmax() 函数

设置元素的长宽范围：

#container {
    display: grid;
    grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    width: 100%;
    background-color: #8cffa0;
    padding: 10px;
}
 
#container > div {
    background-color: #8ca0ff;
    padding: 5px;
}

定义与用法

minmax() 函数定义了一个长宽范围的闭区间， 它与 CSS 网格布局一起使用。

支持版本：CSS3

浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

CSS 语法

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)