用 display: grid 是最稳起点，核心是 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))) 实现自适应列数，配合 gap 和 aspect-ratio 保障布局整洁与图片正方形裁剪。
直接用 display: grid 是最稳的起点，别一上来就啃 :nth-child() 组合选择器——它对 DOM 结构太敏感，新手容易卡在“为什么第 3 个没生效”上。
用 grid-template-columns: repeat(auto-fit, minmax(…))) 控制列数
这是真正自适应的核心：不写死 3 列，而是让浏览器按容器宽度自动算能塞几列。关键不是“九宫格要 3×3”，而是“每张图最小宽 120px，尽可能多排，但不超过 3 列”。
-
minmax(120px, 1fr)表示每项至少 120px，剩余空间均分 -
auto-fit会把空轨道（没内容的列）合并掉，auto-fill则保留空位 - 加
gap: 8px比用margin更干净，不会影响最后一行对齐 - 如果必须限制最多 3 列，就写
repeat(auto-fit, minmax(120px, 1fr)))并配合max-width: 360px容器约束
图片正方形裁剪别靠 width/height 硬设
原始图宽高比不一，硬设 width: 100%; height: 100% 会拉伸；用 object-fit: cover 又得包一层容器。更轻量的做法是：
- 给每个图片容器（比如
.item）设aspect-ratio: 1 - 再让
img填满：width: 100%; height: 100%; object-fit: cover - 注意：iOS Safari 15.4 之前不支持
aspect-ratio，需降级为padding-bottom: 100%+position: relative布局
当总数不是 3 的倍数时，最后一行左对齐是默认行为
很多人误以为要用 justify-content: flex-start 或清 margin 来“修正”，其实 grid 天然就是左对齐。真正要防的是：
立即学习“前端免费学习笔记（深入）”；
- 用
justify-content: center后，最后一行会居中，导致和上面几行错位 - 若坚持要“撑满整行”，就得用 JavaScript 动态补空元素，或改用
grid-template-columns: repeat(3, 1fr)——但这会强制三列，哪怕只有 1 张图也占三格 - 微信朋友圈那种“1 张铺满、2–3 张横排、4 张两行”的逻辑，本质是业务规则，不是 CSS 能自动推导的；真要实现，得结合 JS 判断
children.length后切 class
最易被忽略的一点：所有这些方案都假设图片容器是纯净的——里面不能混 div 描述、p 文字、甚至 HTML 注释。一旦有干扰节点，:nth-child() 就失效，grid 虽不受影响，但语义结构已乱。动手前先确认 DOM 是“纯图流”还是需要包裹隔离。
