CSS 函数 minmax（） 定义了大小范围，该范围从最小值开始，一直到最大值（包括在内）。
要设置网格项的大小限制，请在 CSS Grid 中使用此功能
最小值和最大值是此函数接受的两个参数。
- 每个参数都可以具有以下值之一：max-content、min-content、<flex>、<length>、<percentage> 或 auto。
- minmax（min， max） 函数用于表示当最大值小于最小值时的最小值。在此情况下，将忽略最大值。要设置网格轨道的弯曲系数，可以使用 <flex> 值作为最大值，但不能用作最小值。
可能的值
- <length> - 大于或等于零的长度。
- <百分比> - 此规则定义了与网格容器大小相关的非负百分比，该百分比根据列或行轨道进行调整。
- <flex> - 一个尺寸，以 fr 单位表示为非负值，指定轨道的弯曲系数。
- 每个轨道的大小都设置为 <flex> 按其弯曲系数的比例共享剩余空间。
- max-content - 表示占据网格轨道的网格元素对最大内容大小的最大贡献，由轨道中的最大元素确定。
- min-content - 表示占据网格轨道的网格元素对最小内容大小的最大贡献，由轨道中的最大元素确定。
- auto - 当用作最小值时，它表示网格轨道内网格项的最大最小大小（由最小宽度/最小高度定义）。如果将其用作 max，则对应于值 max-content。
语法
<minmax()> = minmax( min , max )
CSS minmax（） - 网格布局
- 在以下示例中，函数 minmax（） 在 CSS 属性 grid-template-columns 中使用，以创建响应式网格布局。
- minmax（） 函数设置网格列的最小和最大大小限制，并确保每列至少为 100 像素宽，但可以根据可用空间进一步扩展，从而实现灵活且可自定义的布局。
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
padding: 15px;
}
.item {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12s</div>
</div>
</body>
</html>
CSS 相关属性
CSS 函数 minmax（） 可用于：
