auto-fit 更实用，因其自动收缩空轨道使剩余列拉伸占满容器，而 auto-fill 保留空列易致右侧空白；minmax(200px,1fr)确保每列最小200px、多余空间均分，避免布局错乱。
为什么 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) 比 auto-fill 更实用
因为 auto-fit 会把空轨道“收掉”，让剩余列自动拉伸占满容器；而 auto-fill 保留所有可能的列槽（包括空的），容易出现右侧大片空白。实际做响应式卡片列表时，你几乎总是想要前者。
常见错误是写成 repeat(auto-fit, 200px) —— 这样没有 minmax()，浏览器无法判断“最小多宽、最大能撑多少”，结果就是只生成一列或行为不可预测。
-
minmax(200px, 1fr)表示：每列至少 200px，有多余空间就平均分（1fr） - 容器宽度刚好卡在 3×200=600px 和 4×200=800px 之间时，
auto-fit会渲染 3 列并把它们拉宽，而不是硬塞出 4 个挤在一起的窄列 - 如果内容项少于生成的列数（比如只有 2 个卡片但算出来能放 4 列），
auto-fit会让这 2 个卡片独占两列、其余列消失；auto-fill则仍留着 4 列，后两列为空
minmax() 里的两个参数到底怎么影响最终布局
第一个参数是“硬性最小值”，低于它网格项会溢出或触发滚动（除非设了 overflow）；第二个是“弹性上限”，1fr 表示等分剩余空间，max-content 会按内容宽度撑开，2fr 就是其他 1fr 列的两倍宽——但注意：所有带 fr 的列必须在同一行内比较，跨行不累计。
- 写
minmax(150px, 200px)：列宽被锁死在 150–200px，再多空间也不扩展 - 写
minmax(150px, 1fr)：只要容器够宽，列就会持续变宽，直到内容撑不下（比如文字换行、图片被压缩） - 避免用
minmax(min-content, 1fr)：某些浏览器对min-content解析不稳定，尤其含 flex 或绝对定位子元素时
内容高度不一致时，grid-auto-rows 必须显式设置
默认情况下，Grid 行高由第一行最高项决定，后面所有行都按这个高度切——导致矮卡片下面大片留白。这不是 bug，是 Grid 的“行对齐”设计逻辑。
立即学习“前端免费学习笔记（深入）”；
- 加
grid-auto-rows: minmax(100px, auto)：确保每行至少 100px 高，内容多就自动撑开 - 如果卡片内有图片，记得给
img设width: 100%; height: auto;，否则图片可能溢出或破坏行高计算 - 不要依赖
align-items: start来“修复”高度问题——它只控制单元格内对齐，不改变行高本身
IE 不支持 auto-fit，但可以降级为固定列数 + 媒体查询
IE11 只认 auto-fill，且不支持 minmax() 里的 fr 单位。强行用会退化成单列，或者直接失效。
- 安全写法是：先写 IE 友好版
grid-template-columns: repeat(3, 1fr)，再用@supports (grid-template-columns: repeat(auto-fit, 1fr)))包一层现代语法覆盖 - 别用
display: -ms-grid手动模拟——它的语法和标准 Grid 差异大，维护成本高，且无法响应内容数量变化 - 真要兼容 IE，更现实的做法是用 JS 检测列数：
document.querySelector('.grid').children.length，然后动态加 class 控制列数
最易被忽略的一点：当网格项里有 margin 或 gap 时，minmax() 的最小值必须大于等于单个项内容宽 + 左右 margin + gap 半宽，否则可能触发横向滚动或换行错乱。算不准就先加个 box-sizing: border-box 和 padding 替代 margin。
