图片在CSS Grid中排列不整齐，主因是尺寸、容器约束或对齐方式未协调：需设width:100%;height:auto;、display:block;，合理使用justify-items/align-items，并配合minmax()、object-fit和gap优化。
图片在 CSS Grid 中排列不整齐，通常不是 Grid 本身有问题，而是图片尺寸、容器约束或对齐方式没协调好。关键要理解 justify-items 和 align-items 控制的是网格项（grid items）在单元格内的对齐，而不是整个网格的分布。它们只在单个网格单元内部起作用，且前提是单元格有“剩余空间”——比如设置了固定宽高但内容更小，或使用了 fr 单位后仍有空隙。
检查图片是否自带尺寸干扰
浏览器默认会按图片原始尺寸渲染，若网格列宽固定（如 grid-template-columns: repeat(3, 200px)），而图片宽度超过 200px，就会撑开单元格或溢出，导致视觉错位。
- 给图片统一加
width: 100%; height: auto;，让它自适应单元格宽度 - 避免设置图片的
height固定值（除非你明确需要裁剪），否则容易拉伸或留白不均 - 如果用
display: block;消除底部默认间距
正确使用 justify-items 和 align-items
这两个属性作用于网格容器（grid container），影响所有直接子项（即每张图片所在的网格单元格内）：
-
justify-items: center;→ 图片在单元格内左右居中（主轴：行方向） -
align-items: center;→ 图片在单元格内上下居中（交叉轴：列方向） - 常用组合：
justify-items: center; align-items: start;让图片顶部对齐、水平居中，适合图文混排时保持标题对齐 - 注意：如果网格项本身已占满单元格（例如图片设了
width: 100%; height: 100%），这两个属性就看不出效果
更稳的方案：配合 object-fit 和 minmax()
单纯靠对齐属性治标不治本，建议从网格结构和图片渲染双管齐下：
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))让列宽弹性适配，避免硬编码导致换行错乱 - 图片容器（如
height: 200px;，再让图片用object-fit: cover;填满且不拉伸- 这样即使原图比例不同，也能统一高度+居中裁剪，视觉上自然整齐
别忽略 gap 和 box-sizing
看似是“对齐问题”，有时其实是间距或盒模型惹的祸：
-
gap: 1rem;是推荐的网格间隙写法，比用 margin 更可靠；避免同时给图片加 margin 又设 gap，造成双重空白 - 确保网格容器和图片都用了
box-sizing: border-box;，防止 padding/border 影响尺寸计算 - 如果用了 rem/em 单位，检查根字体大小是否被重置，导致 gap 或尺寸计算偏差
