grid-template-columns: repeat(3, 1fr) 实现等宽三列九宫格，列均分、行由内容撑开；需配合 grid-auto-rows: minmax(200px, auto) 统一最小行高，用 gap 控制间隙，媒体查询响应式调整列数。
用 grid-template-columns: repeat(3, 1fr) 实现等宽三列
九宫格本质是 3×3 的二维网格，关键在列均分、行自动适配。直接写 repeat(3, 1fr) 是最稳的——每列占剩余空间的三分之一，不依赖图片原始尺寸或容器固定宽高。
常见错误是写成 repeat(3, 33.33%)：百分比在 Grid 中不推荐，尤其当容器有 padding 或 border 时容易溢出；1fr 是弹性单位，会自动扣除 gap 和边框再均分。
- 如果容器设了
padding，记得配合box-sizing: border-box，否则总宽度可能超限 - 避免给图片设
width: 100%同时又没限制父项高度，容易拉伸变形；优先用object-fit: cover控制裁剪 - IE 不支持
fr单位，如需兼容，得降级用display: flex+flex: 0 0 calc(33.333% - gap)
图片高度不一致？用 grid-auto-rows: minmax(200px, auto)
纯 repeat(3, 1fr) 只管列，行高由内容撑开，导致九宫格“歪斜”。加 grid-auto-rows 能统一最小行高，同时保留弹性——图片短的留白，长的自然延展。
别写死 grid-auto-rows: 200px：那样所有行强制等高，图片会被拉伸或截断；minmax(200px, auto) 才是平衡点。
立即学习“前端免费学习笔记（深入）”；
- 数值 200px 可按实际缩略图预期高度调整，比如手机端常用
150px - 如果图片加载慢，空白行可能闪动，可配合
aspect-ratio: 1/1给图片容器预设比例 - 注意
grid-auto-rows只影响自动创建的行（即内容超出显式定义的行数时），显式定义如grid-template-rows: repeat(3, 1fr)会覆盖它
间隙用 gap，别用 margin 模拟
Grid 的 gap 是专为网格间隙设计的，能精准控制行列间距，且不会触发 margin collapse 或影响对齐逻辑。用 margin 给每个图片加外边距，不仅代码冗余，还容易在响应式断点下失控。
典型翻车现场：设了 margin-right: 10px 后，每行最后一张图多出无意义的右空隙，还得额外写 :nth-child(3n) 去掉它。
-
gap: 10px一行搞定行列间隔，语义清晰 - 若只要列间隙不要行间隙，用
column-gap: 10px - gap 在 Flex 布局中也支持（现代浏览器），但 Grid 下更稳定，尤其涉及换行时
响应式断点里改列数？直接重写 grid-template-columns
想在小屏变 2 列、大屏变 4 列？别试图用 JS 动态改 class，CSS 媒体查询里直接覆盖 grid-template-columns 最干净。
有人用 minmax() + auto-fit 搞“自适应列数”，比如 repeat(auto-fit, minmax(250px, 1fr)))，但对九宫格这种明确要 3 列的场景反而多余——你只是换设备尺寸，不是让列数浮动。
- 移动端写
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 平板补一句
@media (min-width: 769px) and (max-width: 1024px) { grid-template-columns: repeat(3, 1fr); } - 注意媒体查询顺序，从移动到桌面正向写，避免被覆盖
图片的宽高比、加载时机、父容器是否设了 max-width，这些细节都会让 repeat(3, 1fr) 表现不同。调的时候先关掉所有图片样式，只留 grid 基础规则，再一层层加。
