gap 仅在 display: grid 容器上生效，需确保父容器设 display: grid 或 inline-grid；避免与 padding 混用导致视觉失衡；配合 align-items、justify-items 及合理 minmax 值实现均匀对齐。
gap 设置后间距还是不均？检查是否漏了容器 display
Grid 的 gap 只在 display: grid 容器上生效，不是所有父元素设了 gap 就管用。常见错误是把 gap 写在了非 Grid 容器、或者写在了子元素上。
- 必须确保父容器有
display: grid或display: inline-grid -
gap不能继承，子元素加无效 - 如果用了
float、inline-block或未声明display，gap完全被忽略 - 旧版 Safari（≤15.4）需加
-webkit-gap兜底
卡片列表左右不对齐？别混用 padding 和 gap 不加思考
gap 控制项与项之间空隙，padding 控制容器内边距——二者作用区域不同，但叠加时容易视觉失衡。比如 padding: 20px + gap: 16px，首列离左边界是 20px，但相邻列之间是 16px，看起来就“左边宽、中间窄”。
- 要实现“内容区统一留白 + 卡片间等距”，先定
padding，再用gap均分内部间隙 - 避免对网格项单独设
margin，会和gap叠加导致错位 - 若用了
justify-content: center，再加非对称padding（如只设padding-left），首项可能贴边、末项悬空 - 稳妥写法：
padding: 24px; gap: 16px;，配合grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
网格项高度不一致导致上下空隙不同？对齐方式没配对
当卡片内容长短不一、图片尺寸各异，仅靠 gap 无法解决单元格内上下留白差异。这时需要控制网格项在其单元格内的对齐行为。
-
align-items: stretch（默认）会让所有项拉伸填满行高，但前提是行高固定或可预测 - 若行高由
minmax(25rem, 1fr)定义，而卡片height设为20rem，就会多出 5rem 空白——必须让minmax()的最小值 ≤ 项实际高度 - 更灵活的做法是去掉项的固定
height，改用align-items: center或flex-start，再配合padding统一内边距 - 横向对齐也一样：
justify-items: center比start更易获得视觉一致性，尤其当标题长度不一时
响应式下换行后间距突变？minmax 最小值和内容高度不匹配
用 repeat(auto-fit, minmax(250px, 1fr)) 很方便，但若 minmax() 的最小值远大于内容实际宽度/高度，在小屏下会强制撑开轨道，造成“空单元格”或额外垂直空白。
- 检查
grid-template-rows中的minmax()最小值是否合理：它应略大于内容常态高度，而非拍脑袋设 30rem - 动态内容建议用
minmax(min-content, 1fr)或minmax(0, 1fr)，避免硬约束 - 测试关键断点：缩放到刚好触发列数变化时，观察是否出现某行突然变高
- 临时调试技巧：给网格项加
outline: 1px solid red，看清实际占用区域和轨道分配关系
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
