grid-template-columns 里 auto-fill 和 auto-fit 到底选哪个
看需求：想让容器塞满所有可能的列（哪怕后面是空的），用 auto-fill；想让列宽自适应、不留空列，用 auto-fit。二者语法一模一样，行为差异全在这儿。
常见错误现象：auto-fill 在小屏下生成一堆看不见的空列，导致横向滚动或布局错位；auto-fit 在某些旧版 Safari 中兼容性略差（iOS 15.4+ 才稳定支持）。
-
auto-fill会按minmax(200px, 1fr)尽可能多地“预留”列轨道，即使没内容也占位 -
auto-fit做同样计算，但会把空列的轨道合并掉，只保留有内容的列 + 剩余空间均分 - 两者都依赖父容器宽度和子项的
minmax()定义，脱离这个就失效
minmax() 的写法直接影响自适应效果
别写死像素值，也别只写 1fr——那等于放弃自适应。核心是给网格一个“弹性区间”，让浏览器知道列宽能缩到多小、能撑到多大。
使用场景：卡片列表、响应式仪表盘、图片画廊。关键不是“多好看”，而是“缩放时不换行、不溢出、不留下窄缝”。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
minmax(250px, 1fr)—— 最小 250px，最大均分剩余空间 - 避免写
minmax(100px, 1fr)：小屏下会挤出超窄列，文字折行混乱 - 如果内容高度差异大，加
grid-auto-rows: minmax(100px, auto)防止行高塌陷
gap 设置不当会让 auto-fit 看起来“失效”
很多人调了半天发现列数没变，其实是 gap 占了太多空间，导致容器实际可用宽度不够，算下来只能塞下一列。
性能影响不大，但视觉上严重误导判断——你以为布局逻辑错了，其实是 gap 把空间吃掉了。
-
gap是在每个轨道之间插入的，n 列会产生 n−1 个 gap，别忽略这个隐含开销 - 测试时先设
gap: 0确认列数是否符合预期，再逐步加回合理值（如gap: 1rem） - 用
calc()手动减去 gap 总宽？没必要，minmax()+auto-fit本身已包含 gap 计算逻辑
IE 和老版 Safari 的 fallback 要怎么写
别指望 auto-fit 在 iOS 14 或 Safari 13.1 以下正常工作。这些环境会直接忽略整条 grid-template-columns 声明，退回到单列流式布局。
不能靠 JS 检测后加载 CSS，得用原生 CSS fallback 方案。
- 用
@supports包一层，里面写现代语法；外面写display: flex; flex-wrap: wrap或固定列数的grid - 别用
grid-template-columns: repeat(3, 1fr)当 fallback——它在小屏下照样崩，应改用repeat(auto-fit, minmax(280px, 1fr)))的降级写法（部分老版支持 repeat + minmax） - 真正兜底：对不支持 Grid 的环境（如 IE11），用
float或inline-block+calc()，但只保基本可读性，不强求对齐
auto-fit 当万能解药——它只管列轨道生成，不管子项内部如何换行、溢出或拉伸。 
