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))
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF,自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页,适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记(深入)”;
-
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 区域完整
- 日历、表单布局等强调列数稳定的场景


















