使用 grid-template-columns 与 minmax() 可实现固定与响应式混合布局：如 .container { grid-template-columns: 200px minmax(300px, 1fr); }，左侧固定 200px，右侧最小 300px 且可扩展；多列场景如 150px minmax(400px, 1fr) 200px，中间列优先伸缩；还可结合 auto 实现内容宽度自适应；配合媒体查询在小屏下变为 1fr 垂直堆叠，提升移动端体验。
在现代网页布局中，经常需要让某些列保持固定宽度，同时其他区域具备响应式特性。使用 CSS Grid 的 grid-template-columns 配合 minmax() 函数，可以轻松实现固定宽度与响应式混合布局。
使用 grid-template-columns 和 minmax 实现混合布局
Grid 布局允许你通过 grid-template-columns 定义列的尺寸，而 minmax(min, max) 可以设定一个尺寸范围，非常适合创建“最小不小于固定值，最大可伸缩”的列。
例如：侧边栏固定为 200px，主内容区随屏幕变化但最小保持 300px：
.container {
display: grid;
grid-template-columns: 200px minmax(300px, 1fr);
}
这里，第一列是固定宽度的侧边栏，第二列使用 minmax(300px, 1fr) 表示：宽度至少 300px，最多占据剩余空间。
立即学习“前端免费学习笔记（深入）”；
多列混合：固定 + 弹性 + 自适应
你可以组合多个固定列和自适应列。比如左侧菜单固定 150px，中间内容最小 400px 可扩展，右侧边栏固定 200px：
.container {
display: grid;
grid-template-columns: 150px minmax(400px, 1fr) 200px;
}
这样无论屏幕如何变化，中间列都会优先扩展，且不会压缩到低于 400px。
结合 fr、auto 和 minmax 的灵活用法
你也可以让某列“尽可能小（如内容宽度），但不超过某个最大值”，使用 minmax(auto, max) 或与其他单位搭配：
.container {
display: grid;
grid-template-columns: 250px minmax(200px, 1fr) auto;
}
含义：
- 第一列：固定 250px（如导航）
- 第二列：最小 200px，最大占剩余空间（主内容）
- 第三列：自动收缩为内容宽度（如工具按钮）
适配移动端的小技巧
在小屏幕上，可以配合媒体查询将固定列隐藏或改为堆叠：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
这样在手机上所有内容垂直排列，提升可读性。
基本上就这些。利用 minmax() 和 grid-template-columns 的组合，能高效实现固定与响应式并存的复杂布局，无需额外 JavaScript 或复杂的计算。关键是理解 minmax 如何控制弹性边界。
