gap 无效的首要原因是父容器 display 未设为 grid 或 inline-grid；其次注意 gap 值顺序（行距在前、列距在后）、避免与子项 margin 叠加、检查 grid-template-rows 与内容高度是否匹配。
gap 设置了但间距还是不均，先确认 display 是否为 grid
gap 只在 display: grid 或 display: inline-grid 的容器上生效。如果父元素是 display: flex、display: block 或没设 display，写 gap: 16px 完全无效——浏览器会默默忽略它。
调试时直接打开开发者工具，切到“Computed”面板，查 display 值是不是 grid。不是？立刻补上 display: grid，别绕路。
- 常见误操作：给子项加
gap，或在div上只写gap却忘了设display - Flex 布局里用
gap要注意兼容性：Chrome 85+、Firefox 63+、Safari 14.1+ 才支持，老 Safari 会失效 - 别用
grid-gap（已废弃），统一用gap避免混淆
gap 值写反顺序导致行列间距错位
gap 是双值简写：第一个值是 row-gap（行间距），第二个是 column-gap（列间距）。顺序不能颠倒，和 margin 的 top/right/bottom/left 无关。
比如 gap: 8px 24px 表示行距 8px、列距 24px；写成 gap: 24px 8px 就完全反了，视觉上列缝变窄、行缝变宽，看起来就是“不均匀”。
- 单值写法
gap: 12px安全，行列都用这个值 - 想只留竖向缝隙？用
gap: 0 16px，别写gap: 16px 0（那会留横向缝） - 百分比慎用：
gap: 2%基于容器内联尺寸计算，实际效果常比预期小，且不同浏览器渲染可能不一致
gap 和子项 margin 叠加造成视觉膨胀
gap 和子元素自身的 margin 是叠加关系，不是合并。比如 gap: 10px + 子项 margin: 5px，相邻两项之间实际距离是 20px（10px gap + 5px 右边距 + 5px 左边距）。
尤其卡片类组件自带 margin 时，很容易让间距翻倍、忽大忽小。
- 推荐清空子项
margin：* { margin: 0 }或针对性重置.grid-item { margin: 0 } - 若必须保留子项 margin（如文字段落），就把
gap调小，并用justify-content/align-content微调整体对齐，别硬凑 -
gap不触发外边距合并（margin collapse），这点比margin更可控——但前提是别混用
网格轨道定义与内容高度不匹配引发隐式空隙
当 grid-template-rows 用 minmax() 设了最小高度（比如 minmax(25rem, 1fr)），而子项实际高度只有 20rem，多出来的 5rem 就成了“不可见但占位”的空白，看着像间距不均。
这种空隙不是 gap 造成的，而是轨道分配逻辑本身带来的——Grid 严格按轨道尺寸分配空间，不管内容填不填得满。
- 检查子项是否设了固定
height，和grid-template-rows中的minmax()最小值是否冲突 - 解决方法：要么删掉子项
height让它自适应，要么把minmax()的最小值调低至匹配内容高度 - 用
align-items: stretch（默认值）可让子项拉满轨道高度，消除上下空隙差异；若需保持原始高度，改用align-items: start并配合row-gap精控
真正卡住人的往往不是 gap 写错，而是把 gap 当万能胶——它只管轨道间空隙，不管轨道本身尺寸、不管子项 margin、也不管内容撑不满时的留白。排查时得一层层剥开，先看 display，再看 gap 值顺序，接着扫 margin，最后盯 grid-template-rows 和子项 height 的匹配关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
