通过设置 gap、justify-items 和 align-items 可解决 Grid 布局中元素间距不一致问题：gap 统一行列间距，justify-items 控制横向对齐，align-items 管理纵向对齐，推荐将对齐方式设为 center 或 stretch 以实现整齐布局。
Grid布局中元素间距不一致，通常是因为没有统一设置网格轨道的间距或对齐方式。通过合理使用 gap、justify-items 和 align-items 属性，可以有效控制子元素之间的间隔与对齐，实现整齐划一的布局效果。
使用 Gap 统一网格间距
gap 属性用于设置网格行与列之间的间距，替代旧的 grid-gap。它能快速解决因空白不均导致的视觉错乱问题。
-
gap: 10px;— 行与列间距均为10px -
gap: 10px 20px;— 行间距10px，列间距20px
确保在容器上设置 gap，而不是依赖 margin 或 padding 来分隔元素，避免计算偏差。
控制项目在单元格内的水平对齐（justify-items）
justify-items 决定网格项在其单元格内沿行轴（横向）的对齐方式。当元素宽度不一致时，该属性可让它们表现更统一。
常用值：-
justify-items: start;— 左对齐 -
justify-items: center;— 水平居中 -
justify-items: end;— 右对齐 -
justify-items: stretch;— 填满单元格（默认值）
若希望每个元素看起来间距一致，推荐设为 stretch 或 center，避免因内容长短造成视觉偏移。
控制项目在单元格内的垂直对齐（align-items）
align-items 控制网格项在单元格内沿列轴（纵向）的对齐方式，影响上下间距的一致性。
常用值：
-
align-items: start;— 顶部对齐 -
align-items: center;— 垂直居中 -
align-items: end;— 底部对齐 -
align-items: stretch;— 填满单元格高度
当子元素高度不同时，设为 stretch 可使它们高度一致，消除上下空隙差异。
实际应用示例
以下是一个修正间距不一致的典型写法：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
justify-items: center;
align-items: center;
}
这样设置后，所有子元素在各自的网格单元中居中显示，且行列间距统一，整体布局更协调。
基本上就这些。关键在于用好 gap 控制外部间距，配合 justify-items 和 align-items 管理内部对齐，就能解决大多数 Grid 元素间距不一致的问题。
