auto-fit必须搭配minmax()才生效，因auto-fit仅收缩空列并再分配空间，而minmax()定义的弹性范围（如minmax(250px,1fr)）才是触发浏览器动态计算列数的关键。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 就行，但写错一个参数或漏掉 minmax()，整条声明就退化成固定列宽，完全不响应。
为什么 auto-fit 必须搭配 minmax() 才生效
auto-fit 本身不是尺寸函数，它只负责“收缩空列+再分配空间”，真正触发浏览器动态计算列数的，是 minmax() 里定义的弹性范围。常见翻车写法：repeat(auto-fit, 200px) 或 repeat(auto-fit, 1fr) —— 这两种都让浏览器当普通重复值处理，列数彻底写死。
-
minmax(250px, 1fr)表示：每列至少 250px，剩余空间由所有满足条件的列均分 - 去掉
minmax()，auto-fit就失去判断“哪些列该保留、哪些该合并”的依据 - IE11 完全忽略整条声明，降级为
display: block，得单独加 fallback
auto-fit 和 auto-fill 的行为差异很实在
两者语法一样，但渲染结果相反，选错直接影响布局密度：
-
auto-fit：空列被压缩消失，剩余空间全给有内容的列（适合卡片流、图标栏等“有多少内容占多少位”的场景） -
auto-fill：预留所有可能列槽，哪怕某列没内容也占位置（适合仪表盘模板、需要固定网格结构的后台页面） - 小屏下
auto-fill可能导致首行全是空格，用户得横向滚动才能看到第一张图
内容高度不一致时，grid-auto-rows 不是你想的那样工作
很多人以为设了 grid-auto-rows: 1fr 就能让每行高度统一，其实它只对“隐式行”（超出你显式定义的行数后新增的行）起作用。真实问题出在单行内项高度不同：
- 一张带标题+长描述的卡片，和一张纯图卡片，在同一行里会拉高整行——这是 Grid 正常行为
- 想让卡片底部按钮对齐？别碰
grid-auto-rows，改用display: flex; flex-direction: column; justify-content: space-between在 item 内部做对齐 - 真要控行高，用
grid-auto-rows: minmax(200px, auto)，确保每行有最小兜底，又不限死上限
移动端旋转屏幕后列数不变？检查 minmax 的最小值是否过大
比如设了 minmax(320px, 1fr)，在 iPhone 竖屏（375px 宽）下最多只能塞一列，横屏（667px）也才两列——看着像没响应，其实是 min 值卡死了。实际应按内容可读性设下限：
- 纯图卡片：240–280px 是安全区间
- 带标题+摘要的卡片：建议 300–340px，再小文字挤在一起难阅读
- 用 Chrome DevTools 的 “Toggle device toolbar” 实时拖动宽度，观察断点在哪失效
最常被忽略的一点：auto-fit 的重排逻辑只在容器宽度变化时触发，如果内容是 JS 动态插入的，且没触发重排（比如用 innerHTML 直接塞进去），Grid 不会自动重新计算列数——得手动 element.style.width = 'calc(100% - 1px)'; setTimeout(() => { element.style.width = ''; }, 0) 强制重排一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
