minmax()是CSS Grid中定义网格轨道大小范围的函数，语法为minmax(最小值, 最大值)，可实现固定与自适应混合布局。例如grid-template-columns: minmax(240px, auto) 1fr，使左侧列最小240px且随内容扩展，右侧占剩余空间；在三列布局中可用minmax(200px, 1fr) minmax(300px, 2fr) minmax(150px, 1fr)设置不同优先级的弹性分配；结合repeat(auto-fit, minmax(200px, 1fr))可创建响应式卡片网格，容器宽度不足时自动换行，实现高效灵活的布局控制。
在使用 CSS Grid 布局时，经常会遇到需要混合固定列宽和自适应列宽的场景。比如左侧菜单栏保持固定宽度（如 200px），右侧内容区自动填充剩余空间。这种布局可以通过 minmax() 函数结合 fr 单位高效实现。
什么是 minmax()？
minmax() 是 CSS Grid 中用于定义网格轨道大小范围的函数，语法为 minmax(最小值, 最大值)。它允许某个列或行在设定范围内弹性伸缩。
常见用法包括：
- minmax(200px, 1fr)：至少 200px，最多占据 1 份可用空间
- minmax(auto, 300px)：内容自适应，但不超过 300px
- minmax(100px, max-content)：最小 100px，最大由内容决定
固定与自适应混合布局示例
假设我们需要一个两列布局：左侧固定 240px，右侧占满剩余宽度。可以这样写：
立即学习“前端免费学习笔记（深入）”；
.grid-container {display: grid;
grid-template-columns: 240px 1fr;
}
这已经能实现基本效果。但如果希望左侧“尽可能小但不小于 240px”，而右侧灵活扩展，则更适合使用 minmax：
.grid-container {display: grid;
grid-template-columns: minmax(240px, auto) 1fr;
}
这里 minmax(240px, auto) 表示：宽度最小为 240px，最大由内容自然撑开（不会压缩）。当内容超过 240px 时，列会自动变宽；否则保持最小值。
更复杂的响应式场景
在多列布局中，可以组合多个 minmax() 实现智能分配。例如三列布局：两侧固定最小宽度，中间自适应：
.grid-container {display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr) minmax(150px, 1fr);
}
这个设置意味着：
- 第一列：最小 200px，最多分得 1 份空间
- 第二列：最小 300px，最多分得 2 份空间（优先级更高）
- 第三列：最小 150px，最多分得 1 份空间
浏览器会根据容器总宽度，按规则动态分配空间，在保证最小宽度的前提下实现合理伸缩。
与 auto-fit 的配合使用
结合 repeat() 和 auto-fit，minmax 能实现更智能的响应式网格：
.grid-responsive {display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
这段代码表示：每列最小 200px，当容器宽度足够时自动排列多列，不足时自动换行（单列显示）。非常适合卡片式布局。
基本上就这些。通过灵活运用 minmax()，可以轻松实现从简单双栏到复杂响应式的混合宽度布局，让 Grid 真正做到“既定形又弹性”。
