朋友圈九宫格实际按图片数量动态排版：1张铺满、2–3张横排、4张为2×2、5–9张才用3×3；4张是需特殊处理的临界点，须用:nth-child(3):nth-last-child(2)精准控制换行。
朋友圈九宫格不是固定 3×3 的栅格，而是根据图片数量动态调整排列：1 张铺满、2–3 张横排、4 张变 2×2、5–9 张才上九宫格。硬套 grid-template-columns: repeat(3, 1fr) 会出错——比如 4 张图强行三列，最后一列只剩 1 个，留白难看。
用 flex + :nth-child 控制每行数量
核心是让容器 display: flex 并 flex-wrap: wrap，再用选择器“掐断”换行时机：
- 2–3 张时，每张设
width: calc(100% / N - gap)（N=2 或 3），不设换行 - 4 张时，给第 3 张加
margin-right: 0，并用:nth-child(3):nth-last-child(2)精准命中它，让它“挤”下一行 - 5–9 张时，统一设
width: calc(33.333% - gap)，再用:nth-child(3n)清除每行末尾的margin-right - 注意
gap必须用margin模拟（CSSgap在 flex 中兼容性差），且所有img需设vertical-align: top防文字基线留空隙
:nth-child 和 :nth-last-child 联合判断图片张数
单靠 :nth-child(n) 无法知道总张数，必须搭配 :nth-last-child() 才能定位“倒数第 N 个”。例如：
- 4 张图的第二行起始：匹配
img:nth-child(3):nth-last-child(2)（即“是第 3 个，且倒数第 2 个”） - 只有一张图：
img:only-child最可靠，比:nth-child(1):nth-last-child(1)更简洁 - 避免写死
:nth-child(4)——如果只有 3 张图，这条规则不会生效，但开发者常误以为它“该管第 4 张”，结果调试半天发现选择器根本没命中
图片宽高自适应与裁剪风险
朋友圈实际渲染中，图片不会拉伸变形，而是等比缩放+居中裁剪。纯 CSS 实现要注意：
- 不要对
img直接设width/height，改用包裹容器（如div.image-item）设尺寸，img设width: 100%; height: 100%; object-fit: cover; -
object-fit: cover是关键，没有它，小图会被拉宽、大图会留白；但 iOS Safari 旧版本需加-webkit-object-fit: cover - 如果后端返回的图宽高比差异大（如 16:9 和 4:5 混排），仅靠
cover会导致裁剪区域不可控——这时得前端用 canvas 预处理，或和服务端约定统一比例
最易被忽略的是“4 张图”的边界情况：它既不是 1–3 的线性排布，也不是 5–9 的规整九宫格，而是唯一需要手动干预换行逻辑的临界点。很多实现直接跳过它，导致 4 张图在 iPhone 上显示成 3+1，右侧大片空白——这不是 bug，是没覆盖到这个组合判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
