gap是grid布局中设置网格项间距最直接可靠的方式，专为容器级留白设计，需父容器设为display: grid或inline-grid；支持单值（如gap: 16px）或双值（如gap: 8px 24px，前者行距后者列距），单位必须明确，不可与margin混用以防间距叠加。
gap 属性是 Grid 布局中设置网格项之间间距最直接、最可靠的方式，它专为容器级留白设计，不依赖子元素 margin，也不影响首尾项与容器边缘的距离。
必须先让父容器成为 Grid 容器
gap 只在 display: grid 或 display: inline-grid 的元素上生效。如果父元素只是普通 div 或用了 flex，写 gap 会完全无效。
- 正确写法：
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } - 错误写法：给
<p></p>或display: block的 div 加 gap，毫无作用 - 调试时可在浏览器开发者工具的“Computed”面板确认 display 值是否为 grid
gap 的值怎么写才准确
gap 支持单值和双值写法，顺序固定：第一个是行间距（row-gap），第二个是列间距（column-gap）。
-
gap: 12px→ 行距和列距都是 12px -
gap: 8px 24px→ 行距 8px，列距 24px（不是“上下/左右”，而是“行/列”） -
gap: 0 16px→ 行间无空隙，只在列方向留 16px - 单位必须明确，
gap: 1无效；gap: 1rem、gap: 2vh合法；百分比仅在 Grid 中列间距部分支持，但行为不稳定，慎用
别和 margin 混着用，容易多出一倍空隙
gap 和子元素自身的 margin 是叠加关系，不是合并关系。比如 gap: 10px + 子项 margin: 5px，相邻两项之间实际距离是 20px（10px gap + 5px 右边距 + 5px 左边距）。
- 推荐做法：子元素 margin 设为 0，全部靠 gap 统一控制内间距
- 若卡片组件自带 margin，可将 gap 调小，并配合
justify-content或align-content微调整体对齐 - gap 不会和 margin 发生外边距合并（margin collapse），这点比 margin 更可控
需要单独控制行列？用 row-gap 和 column-gap 更清晰
当垂直和水平方向留白需求不同时，拆开写语义更明确，也方便后续维护或媒体查询中独立调整。
-
row-gap: 12px; column-gap: 24px;比gap: 12px 24px更易读 - 在响应式场景中，可只改
row-gap：比如小屏下@media (max-width: 768px) { .grid { row-gap: 8px; } } - 注意：不要同时写
gap和row-gap，后者会覆盖 gap 中的行间距部分，导致列间距仍按 gap 设置，行间距却变了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
