如何移除Grid栅格系统中卡片组件之间的多余间距

• 先查Grid容器的内置预设间距：Bootstrap、MUI、ElementUI这类常用组件库的栅格，默认会给容器加gap: 1rem的固定间距，要是和设计需求对不上，直接把这个属性改成0就行，想自定义间距就直接填需要的数值，别硬沿用组件库的默认值。
• 再查卡片自身的默认外边距：很多现成的卡片组件会自带左右、上下的margin边距，这部分边距会和Grid的轨道间距叠在一起，直接写选择器把卡片的默认外边距重置成margin: 0就好，别把这部分和卡片内部留的内容padding搞混。
• 修正Grid轨道的空间分配逻辑：要是你给Grid容器加了justify-content: space-between、space-evenly这类自动分配剩余空间的属性，或者列设置纯1fr没加范围限制，浏览器会自动把多出来的空间塞到卡片轨道之间，凭空冒出非预期的间距。调整的时候把列规则改成grid-template-columns: repeat(填充模式, minmax(你的卡片目标宽度, 1fr))，对齐属性改回默认的start，这部分无意义的空隙就没了。
• 排查嵌套栅格的边距干扰：要是你套了两层Grid做布局，外层栅格的每个格项如果带了默认内边距，会压缩内层的可用宽度，连带让内层卡片的间距看起来比预设的大。这种情况要么把外层格项的默认内边距去掉，要么直接通过卡片自身的均匀内边距控制真正需要的间距值。

快速排查技巧：调整样式的时候直接开浏览器开发者工具，选中Grid容器和对应卡片，看computed面板里的边距、间隙计算值，几秒就能定位是哪一层的样式导致的多余间距。

内容的提问来源于stack exchange，提问作者Faiyaz Awsaf