关键在于用 repeat(N, 1fr) 主动定义每行列数，如 repeat(3, 1fr) 严格三列，配合媒体查询分段控制：手机1列、平板2列、桌面4列，避免 auto-fill/auto-fit 导致的重排抖动与栅格错位。
用 CSS Grid 实现“每行固定数量的图片卡片”，关键不是让浏览器“自动计算数量”，而是**你主动定义数量**——Grid 的优势恰恰在于能精准控制列数，不靠内容或窗口缩放被动响应。所谓“自动”，其实是布局行为稳定、换行逻辑可预测，而非动态算出数字。
直接写死列数：最稳、最可控的方式
如果明确要求“始终 3 列”或“平板上固定 4 列”，就不用 minmax 或 auto-fit，直接用 repeat(N, 1fr)：
-
每行严格 3 张卡片：
grid-template-columns: repeat(3, 1fr); -
每行严格 4 张，且等宽填满容器：
grid-template-columns: repeat(4, 1fr); - 搭配
gap: 16px控制卡片间距，干净无外边距合并问题
配合媒体查询，分段固定列数
不同设备下切换固定列数，比“全自动适配”更符合设计意图，也避免小屏下卡片过窄、大屏下过宽：
- 手机（≤767px）：
grid-template-columns: 1fr;→ 每行 1 张 - 平板（768px–1023px）：
grid-template-columns: repeat(2, 1fr);→ 每行 2 张 - 桌面（≥1024px）：
grid-template-columns: repeat(4, 1fr);→ 每行 4 张
这样写，缩放时不会出现“3.2列”或最后一张突然掉行，行列始终对齐。
为什么不用 auto-fill / auto-fit？
这两个值会让列数随容器宽度连续变化（比如从 3 列跳到 4 列再跳回 3 列），看似“智能”，但实际会导致：
- 窗口缓慢缩放时，卡片频繁重排，体验抖动
- 设计师给的视觉稿通常按 1/2/4 列出图，非整数列难对齐栅格
- 图片卡片若带标题文字，列数突变易造成行高错乱或文字换行不一致
除非业务明确要求“尽可能多塞、不空行”，否则固定列数 + 媒体查询才是生产环境首选。
图片卡片自身要注意的细节
固定列数只是第一步，卡片内部要防止撑破或变形：
- 图片加
width: 100%; height: auto;或aspect-ratio: 4 / 3; object-fit: cover; - 卡片设
box-sizing: border-box;，确保 padding 不影响网格宽度计算 - 文字内容用
word-break: break-word;和line-clamp（配合 -webkit-）防溢出 - 避免给卡片本身写
width或flex，它应完全由 Grid 轨道决定尺寸
