minmax() 定义轨道弹性区间而非固定极值，仅在repeat()中响应容器变化；auto-fit配合minmax可动态计算列数实现无媒体查询响应式布局，需设fallback并注意gap降级处理。
minmax() 的真实行为：不是“最小-最大”，而是“弹性区间”
minmax() 在 Grid 中常被误解为“设一个最小值和最大值”，其实它定义的是单个轨道的**可伸缩范围**：当容器有富余空间时，轨道可以撑开；当空间紧张时，它至少保持 min 宽度，不小于这个下限。关键点在于——它只在 grid-template-columns 或 grid-template-rows 的重复轨道中才真正“响应”起来。
常见错误是单独写 minmax(200px, 1fr) 期望它自动适配小屏，但如果没有配合 repeat() 或自动列数机制，它只会按单列渲染，毫无响应性。
- ✅ 正确姿势：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - ❌ 无效写法：
grid-template-columns: minmax(250px, 1fr)（仅一列，不随容器变） -
auto-fit和auto-fill都能触发自动列数计算，但auto-fit会把剩余空间分给现有列，auto-fill则保留空轨道（可能看不见但占位）
为什么 auto-fit + minmax 能替代媒体查询
本质是浏览器在布局阶段动态计算列数：容器宽度 ÷ min 值 → 得出最多能塞几列，再用 1fr 平分剩余空间。整个过程不依赖视口尺寸监听，也不触发重排以外的开销，天然无 JS、无媒体查询。
- 当容器宽 1200px，
minmax(250px, 1fr)最多生成 4 列（1200 ÷ 250 = 4.8 → 取整为 4） - 当缩到 700px，自动变成 2 列（700 ÷ 250 = 2.8 → 取整为 2），每列约 350px 宽
- 如果用
minmax(250px, 300px)，则列宽被锁死在 250–300px 之间，超出部分留白，失去“弹性填满”能力
实际项目中必须调的三个参数
光写 repeat(auto-fit, minmax(250px, 1fr)) 往往不够，真实内容需要微调：
立即学习“前端免费学习笔记（深入）”；
-
min值不能只看设计稿——要兼顾文字折行、图片最小可读宽度，建议从280px起试（手机横屏窄处约 320px，留出边距） -
1fr不是万能的：若子项内有固定宽元素（如图标+文字组合），需加min-width: 0防止溢出挤压 - 加
gap后总宽度可能超限，此时要确认是否用了box-sizing: border-box；否则 padding/margin 会让minmax实际可用空间变小
兼容性与 fallback 的务实处理
Firefox 52+、Chrome 57+、Safari 10.1+ 均支持 auto-fit + minmax()，但 IE 完全不支持 Grid。如果必须兼容 IE，别强行 polyfill Grid，而是用 display: flex + flex-wrap 降级，或直接上 CSS Container Queries（但目前支持度更低）。
更现实的底线是：只要不支持 auto-fit，整个 repeat() 表达式会被忽略，回退到浏览器默认行为（比如单列）。所以务必在 grid-template-columns 前声明一个基础值作为 fallback：
grid-template-columns: 1fr; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
注意第二行会覆盖第一行，且现代浏览器只认第二行；老浏览器跳过不认识的语法，沿用第一行。
真正容易被忽略的是 gap 的 fallback：CSS Grid 的 gap 在 Flex 中没有等价物，如果降级到 Flex，得用 margin 模拟，且要小心最后一行/列的多余外边距。
