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))

Html To Pdf

使用 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 区域完整
• 日历、表单布局等强调列数稳定的场景