用 gap 实现卡片等间距排列：gap 控制网格项间空隙，justify-content 仅调整整组行列在容器中的对齐；正确写法为 display: grid + gap，外边距用 padding 配合。
用 CSS Grid 实现卡片等间距排列，核心是 别混用 justify-content 和 gap —— 它们作用对象不同：gap 控制的是网格项之间的空隙，而 justify-content 是调整整个网格容器内所有列（或行）在容器主轴上的对齐方式，不负责项与项之间的间距。
正确做法：用 gap 控制卡片间距
只要设置 display: grid，再配合 gap，就能干净、可靠地实现卡片间等距。例如：
.grid-container {<br> display: grid;<br> grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));<br> gap: 24px;<br> }这里 gap: 24px 同时作用于行与列方向（等效于 row-gap: 24px; column-gap: 24px），每张卡片周围都会留出统一的空白，视觉上就是“等间距排列”。
为什么不用 justify-content 来调卡片间距？
justify-content 对 grid 布局中卡片间距完全无效。它只影响整组列（或行）作为一个整体，在容器主轴上的位置。比如：
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center→ 所有列居中，但列之间依然紧贴（除非你设了gap） -
justify-content: space-between→ 最左列贴左、最右列贴右，中间列均匀分布——但这只是列与列的外边缘对齐，并不会让卡片本身产生间隙
换句话说：它调节的是“列块”的布局，不是“卡片”的间距。
需要卡片左右留白？用 padding 配合 gap
如果希望最外侧卡片和容器边缘也有间距（即“内边距 + 项间间隙”），不要靠 justify-content 挤，而是给容器加 padding：
.grid-container {<br> padding: 0 24px;<br> gap: 24px;<br> /* 其他 grid 设置不变 */<br> }这样，左右各留 24px 内边距，卡片之间也保持 24px 间隙，整体视觉更均衡。
兼容性提醒
gap 在现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+、Edge 79+）已全面支持。如需兼容旧版 Safari（grid-column-gap / grid-row-gap 作为降级写法，或搭配 @supports 做渐进增强。
