gap比margin更可靠，因其是网格容器原生属性，只作用于轨道间、不参与盒模型计算，且随列数自动重分布；而margin会合并、导致最后一行多余空白，需额外处理。

直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) + gap，就能实现列数自动增减、每列等宽、间隙自适应——但必须控制好容器宽度和子项样式，否则 gap 会失效或列宽崩掉。

为什么 gap 在 Grid 里比 margin 更可靠

很多人给每个网格项加 margin-bottom 模拟行间距，结果最后一行底部多出空白，或者小屏下 margin 过大挤压内容。这是因为 margin 会合并、不受容器约束，而 gap 是网格容器的原生属性，只作用于轨道之间，不参与盒模型计算。

• gap 值始终相对于容器可用空间生效，不会导致子项溢出
• 搭配 auto-fit 时，gap 会随列数变化自动重分布，无需媒体查询干预
• 若用 margin，必须额外处理最后一行的 :nth-child() 或 JS 判断，维护成本高

minmax(280px, 1fr) 的最小宽度怎么选才不卡死列数

设得太小（比如 200px），小屏下可能强行塞两列，文字挤成一团；设太大（比如 350px），中屏设备只能单列，浪费空间。280px 是当前主流卡片内容（含图标+两行文字+操作按钮）的最小可读宽度基准值。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 移动端（≤480px）：自动退为 1 列，1fr 占满全宽
• 平板（481–768px）：通常触发 2 列，每列约 360px（扣除 gap 后）
• 桌面（≥769px）：稳定 3 列起，列宽随窗口拉伸均分
• 别写死 minmax(300px, 1fr) 后又给容器加 padding: 20px 却忘了 box-sizing: border-box，否则实际可用宽度少 40px，列数判断就偏移了

间隙自适应不是靠 %，而是靠 clamp() 或视口单位

写 gap: 1rem 在手机上显得过大，在 4K 屏上又太小；写 gap: 2% 会随容器高度变化，完全不可控。真正适配的写法是用 clamp() 或 vw。

• gap: clamp(0.5rem, 2vw, 1rem) —— 小屏保底 0.5rem，中屏按视口缩放，大屏封顶 1rem
• gap: 1.5vmin —— 取视口宽高较小值的 1.5%，在竖屏手机和横屏笔记本上都较均衡
• 避免 gap: 5%：百分比 gap 在 Grid 中无定义，浏览器会忽略整条声明
• Firefox 和 Chrome 117+ 支持良好；若需兼容 Chrome 116-，降级为固定 gap: 12px 即可

子项内容撑开列宽？先检查这三处隐性干扰

即使 CSS 写对了，图片、文本、Flex 容器仍可能让 minmax() 失效，因为它们强行覆盖了轨道尺寸计算逻辑。

• 图片没加 max-width: 100% → 直接突破列宽，整列被拉宽
• 标题用了 white-space: nowrap → 文字拒绝折行，列宽被迫扩张以容纳整行
• 卡片内部用了 display: flex 且子项有 flex: 1 → 弹性分配抢占了 grid 轨道的控制权
• 统一加 img, video { max-width: 100%; height: auto; } 和 * { overflow-wrap: break-word; } 能覆盖 90% 的撑开问题

最常被忽略的是容器本身的 width 和 max-width —— 如果父容器是 display: inline-block 或未设宽度，minmax() 里的 1fr 就失去参照系，整个自适应逻辑就停摆了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！