minmax()函数用于设置网格行列的最小和最大尺寸范围，实现自适应布局。例如grid-template-columns: minmax(200px, 1fr)定义列宽至少200px，空间充足时占1份；结合auto-fit可实现自动换行与填满剩余空间，如repeat(auto-fit, minmax(250px, 1fr))使每列最小250px并均分宽度；用于行高时如minmax(60px, auto)确保标题行最小60px且内容多时自动扩展，主内容区用minmax(200px, 1fr)保证最小高度并占据剩余空间，有效满足响应式设计需求。
CSS 的 minmax() 函数在创建自适应网格布局时非常实用，它允许你为网格的行或列设置一个尺寸范围：最小值和最大值。当容器空间变化时，列或行可以在该范围内灵活调整，从而实现真正响应式的布局。
minmax() 语法说明
minmax(最小值, 最大值) 是grid-template-columns 或 grid-template-rows 中常用的函数。它定义了一个尺寸区间：
- 如果可用空间不足，使用“最小值”
- 如果空间充足，列宽可扩展到“最大值”
- 最大值可以是固定值，也可以是
fr、auto等弹性单位
用 minmax 设置自适应列
常见场景是让某些列有最小宽度（如 200px），但在空间充足时尽可能拉伸。例如：
.container {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}
含义：
- 第一列至少 200px，最多占 1 份空间
- 第二列至少 300px，最多占 2 份空间
- 屏幕变窄时优先保持最小宽度，不换行挤压内容
结合 auto-fit 和 auto-fill 使用
更强大的用法是搭配 repeat(auto-fit, ...) 或 repeat(auto-fill, ...) 实现自动换行的自适应网格：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
效果说明：
- 每个列最小 250px，最大为 1fr（均分剩余空间）
- 容器宽度不够时，自动减少每行列数并换行
- 内容少时不会留白，
auto-fit会拉伸项目填满空间
控制行高自适应
同样可用于行高设置，比如让内容区自动撑开但保留最小高度：
.layout {
display: grid;
grid-template-rows: minmax(60px, auto) minmax(200px, 1fr);
}
含义：
- 第一行用于标题，最小 60px，内容多时自动增高
- 第二行为主内容区，最小 200px，剩余空间全给它
基本上就这些。minmax 配合 fr、auto、固定值，能覆盖大多数响应式布局需求，关键是理解“范围”概念，而不是固定尺寸。不复杂但容易忽略细节。
