gap仅在display: grid或inline-grid容器上生效；需检查父容器display值，flex、block等均不支持，且gap: 10px 20px中前者为行距、后者为列距，不支持百分比，会覆盖row-gap/column-gap，不等同于margin。

gap 只在 display: grid 或 inline-grid 容器上生效

写了 gap: 20px 却没效果？第一反应该检查父容器的 display 值。只有显式声明为 display: grid 或 display: inline-grid 的容器才认 gap；flex、block、subgrid、甚至加了 position: absolute 的 grid 容器，都会让 gap 完全失效。

常见误操作包括：

• 用 float 或 inline-block 模拟网格，然后硬套 gap
• 父级是 display: flex，子级再设 display: grid，但把 gap 错写在 flex 父级上
• 用了 display: subgrid（目前不支持 gap）

gap: 10px 20px 的顺序不能颠倒

gap 是简写，两个值时固定为「行间距 row-gap 在前，列间距 column-gap 在后」。写成 gap: 20px 10px 就是行距 20px、列距 10px——不是“左右上下”或“宽高”，别按 margin 顺口溜记。

这些写法等价：

• gap: 12px ⇔ row-gap: 12px; column-gap: 12px
• gap: 8px 16px ⇔ row-gap: 8px; column-gap: 16px
• gap: 1rem 0.5rem 合法，但 gap: 5% 无效（Grid 中不支持百分比）

注意：如果同时写了 gap 和单独的 row-gap 或 column-gap，gap 会覆盖对应方向的值，但反向不成立。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

gap 不是 margin，别混着加

gap 插入的是轨道（track）之间的空白，不改变子项尺寸，也不参与盒模型计算；而给 grid item 加 margin 会撑开布局、可能破坏对齐，尤其和 justify-items 或 align-items 冲突。

典型翻车场景：

• 首行紧贴容器顶部、末行紧贴底部 → 这是正常行为，gap 只作用于「相邻轨道之间」，不会在最外侧加空隙。要整体留白，得用 padding 包裹容器
• 某列看起来间隙变大 → 很可能是某个 item 自己加了 margin-right，和 gap 叠加导致
• 响应式断点里 gap + margin 一起调，换行后错位严重

IE 和老 Safari 需要降级处理

IE10/11 完全不支持 gap（连 grid-gap 和 -ms-grid-gap 都无效），Safari 15.x 及更早需用带前缀的 row-gap/column-gap。

稳妥写法是：

• 放弃 IE → 直接用 gap: 12px，无需兼容处理
• 仍需支持 Safari ≤15 → 同时写三句：row-gap: 12px; column-gap: 12px; gap: 12px;
• 绝对不推荐用 flex + margin 模拟 gap，换行、内容高度不一致时极易崩

真正容易被忽略的是：gap 扣除的是容器总可用空间，不是从每条 track 里硬扣。比如 grid-template-columns: 1fr 1fr + gap: 40px，两列分到的宽度是 (容器宽 − 40px) / 2，不是 容器宽 / 2 − 20px——这个计算逻辑直接影响 fr 单位下的视觉预期。

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