minmax()函数可定义网格轨道的最小和最大尺寸，参数支持长度、百分比、fr单位或auto；用于grid-template-columns时能实现响应式列宽，如minmax(200px, 1fr)表示最小200px、空间充足时占1份剩余空间；嵌套在repeat(auto-fit, minmax(250px, 1fr))中可创建自适应等分布局；当最大值为fr时，仅在容器空间足够才生效，否则按最小值布局；使用auto作为参数可让内容决定尺寸，如minmax(auto, 100px)表示由内容撑高但不超过100px。
如果您在使用CSS Grid布局时需要为网格轨道设置一个弹性范围，确保其尺寸在最小值和最大值之间动态调整，则可以利用minmax()函数来实现这一效果。该函数允许您定义尺寸的下限和上限，从而增强布局的响应性与适应性。
本文运行环境：MacBook Pro，macOS Sonoma
一、基本语法与参数说明
minmax()函数接受两个参数，分别代表尺寸的最小值和最大值。这两个参数可以是长度单位、百分比、分数（fr）或其他有效的CSS尺寸关键字，如auto。当容器空间变化时，轨道尺寸会在设定的范围内进行伸缩。
1、第一个参数表示轨道的最小尺寸，不能为负值。
立即学习“前端免费学习笔记（深入）”；
2、第二个参数表示轨道的最大尺寸，若为fr单位，则仅在最小值无法满足时生效。
3、若最大值小于最小值，则最大值会被忽略，实际采用最小值作为固定尺寸。
二、结合grid-template-columns使用
在定义列宽时，minmax()常用于确保某一列具有最低可接受宽度，同时在有足够空间时能够扩展。这种用法特别适用于创建响应式表格或卡片布局。
1、编写Grid容器样式，设置display: grid。
2、在grid-template-columns中使用minmax()，例如：grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);。
3、此时第一列最小为200px，第二列最小为300px，剩余空间按比例分配。
三、与repeat()函数嵌套使用
通过将minmax()嵌套在repeat()函数中，可以快速创建多个具有相同范围限制的轨道，简化代码并提高可维护性。这种方式适合构建等分布局但又不失弹性的设计。
1、使用repeat()指定重复次数或模式，内部调用minmax()定义范围。
2、例如：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));。
3、浏览器会自动计算最多可容纳多少个最小宽度为250px的列，并将其余空间平均分配。
四、处理fr单位在minmax中的特殊情况
当minmax()的第二个参数使用fr单位时，只有在可用空间超出最小值总和的情况下才会启用fr分配机制。这使得布局能够在紧凑与宽松状态下智能切换。
1、设定列如：minmax(100px, 1fr)，表示该列至少100px，有多余空间则占据一份。
2、若所有轨道的最小值之和已超过容器宽度，则fr部分失效，可能出现溢出或压缩现象。
3、可通过设置overflow属性或调整最小值来避免内容被裁剪。
五、使用auto关键词作为参数
minmax()支持使用auto作为任一参数，代表由内容决定尺寸。这在需要根据内容自适应大小的同时保留伸缩能力时非常有用。
1、例如：grid-template-rows: minmax(auto, 100px); 表示行高由内容撑起，但不超过100px。
2、若内容高度超过最大值，最大值仍会起约束作用，除非设置为none或其他无界值。
3、结合align-content或justify-items可进一步控制内容对齐方式。
