用CSS Grid的auto-fit+minmax()配合place-items: center可实现图片列表自适应、居中、等宽等高对齐；推荐写法为.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)));gap:12px}。
图片列表排列不整齐，通常是因为图片尺寸不一致、外边距/内边距干扰，或传统浮动/inline-block布局对齐逻辑弱。用 CSS Grid 的 auto-fit + minmax() 配合 place-items: center，能真正实现内容自适应、自动居中、等宽等高对齐。
用 grid-template-columns + minmax() 控制列数与最小宽度
避免固定列数导致小屏溢出或大屏留白。推荐写法：
.gallery {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))));
gap: 12px;
}
说明：每项至少 250px 宽，空间充足时均分（1fr），不足时自动换行；auto-fit 会合并空轨道，比 auto-fill 更紧凑。
统一图片尺寸，但不裁剪内容
直接设 width: 100%; height: 100% 可能拉伸变形。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 给图片容器（如
overflow: hidden- 图片本身用
object-fit: cover（保持比例裁切）或object-fit: contain（完整显示，留白）- 若需纯等高，可在 grid 容器加
align-items: stretch（默认行为），再约束子项高度垂直+水平居中，消除文字基线干扰
图片在 inline-block 或未设 vertical-align 时，底部常留空白（因默认对齐 text-bottom）。Grid 下可彻底规避：
.gallery {
place-items: center;
}
.gallery img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
}注意：
place-items: center同时控制主轴和交叉轴，比单独写 justify/align 更简洁；display: block消除行内元素的基线问题。响应式微调：不同断点重设最小宽度
手机端可缩小最小列宽，平板适配中间值：
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))));
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))));
}
}不依赖 JavaScript，纯 CSS 即可让列表在各种设备上始终整齐、居中、无错位。
- 图片本身用
