auto-fit适用于90%卡片布局，内容少时拉伸填满、多时智能分列；auto-fill用于需预留空白格子的场景，如拖拽占位或固定槽位仪表盘。
直接用 auto-fit 就行，90% 的卡片类布局都该选它——内容少时自动拉伸填满整行，内容多时智能分列，不留白也不滚动；auto-fill 则适合需要预留空白格子的场景，比如拖拽占位或固定槽位仪表盘。
auto-fit 和 auto-fill 的核心区别
两者语法一样，但渲染逻辑相反：
-
auto-fit：尝试生成尽可能多的列，但会把没内容的空轨道“收缩为 0”，再把释放的空间均分给有内容的列（前提是 max 值是
1fr或弹性值） - auto-fill：同样尝试生成列，但不管有没有内容，所有可能的轨道都保留，哪怕右侧全是空白，甚至在小屏下引发横向滚动
日常怎么写才真正生效
一行关键代码就能撑起响应式网格：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
-
280px是单列最小宽度，确保卡片不被压扁 -
1fr表示“等分剩余空间”，不是2fr或3fr——后者浏览器会静默降级为max-content，导致列宽失控 - 别漏掉
grid-auto-rows: minmax(min-content, auto)，否则高度不一的卡片会让行高塌陷 - 用
gap控制间距，别用margin，后者会破坏对齐
为什么写了 auto-fit 还是只出一列
大概率是父容器“没宽度可算”：
- 父元素没设
width，或被包裹在display: inline-grid里 - 在 Flex 容器中使用时，未设置
flex-basis或width: 100%，导致 Grid 拿不到内联尺寸（inline size） - 子项自己写了
width: 100%或max-width，卡死尺寸，Grid 认为“放不下第二列”
什么时候才该用 auto-fill
不是为了“填满”，而是为了“留位”：
- 需要配合
grid-column显式定位，比如拖拽组件落到指定格子 - 做九宫格仪表盘，即使某格暂无数据，也要保持结构对齐和 hover 区域完整
- 日历、表单布局等强调列数稳定的场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
