用 grid-template-columns: repeat(3, 1fr) 实现三列等宽响应式画廊，配合 gap 控制间距、object-fit: cover 防图片

变形，并通过媒体查询或 auto-fit 自适应列数，务必设置 display: grid。

用 grid-template-columns 控制列数和等宽分配

图片画廊最常见需求是“每行固定列数，图片宽度均分”，核心就是让容器用 grid-template-columns 定义重复的等宽轨道。比如 3 列布局：grid-template-columns: repeat(3, 1fr) —— 这表示 3 个等比例份额的列，自动撑满容器宽度。

注意：别用 px 或 % 写死列宽，否则响应性会崩；1fr 是弹性单位，能随容器缩放。如果想留间隙，直接配 gap，别在子项里加 margin，否则会破坏 grid 的轨道对齐逻辑。

• repeat(auto-fit, minmax(250px, 1fr)) 更实用：当容器变窄时自动减少列数，每列最小 250px，最大占满可用空间
• 避免写 grid-template-columns: 1fr 1fr 1fr，它不响应式；repeat() 更简洁且语义清晰
• 如果图片高度不一致，后续要用 align-items: stretch（默认值）确保统一拉高，或改用 align-items: start 防止变形

图片本身不拉伸变形的关键设置

grid 只管布局位置，不管图片怎么显示。默认 会按原始宽高比渲染，一旦容器高度被 grid 轨道约束，就容易溢出或留白。必须显式控制：

• 给图片加 width: 100%; height: 100%，再配合 object-fit: cover —— 这样图片填满单元格且不畸变
• 别只设 width: 100%，否则高度由内容决定，grid 行高可能塌陷或错乱
• 如果希望保留完整图片（不裁剪），用 object-fit: contain，但要接受上下/左右留白

处理响应断点时，grid-template-rows 通常不需要手动设

多数画廊只需控制列数，行数由内容数量自动计算。强行写 grid-template-rows: repeat(4, 200px) 反而会让空行占位、破坏流式体验。

• 真正需要设行高的场景极少，比如做固定高度瀑布流（但那是 column-count 或 JS 方案更合适）
• 用媒体查询切换列数即可：@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
• 如果某张图需跨行（如大图 banner），用 grid-row: span 2，但要确保父容器没设 grid-auto-rows 锁死行高，否则跨度失效

IE 不支持 fr 单位，但现代项目基本可忽略

IE11 支持 CSS Grid，但不支持 fr 和 repeat(auto-fit)。如果你必须兼容 IE，得回退到 display: -ms-grid + 固定列宽（如 -ms-grid-columns: 1fr 1fr 1fr 实际无效，得用 250px 等具体值），同时放弃响应列数变化。

现在绝大多数项目已不需考虑 IE，直接用标准语法更干净。唯一容易漏的是忘记给 grid 容器设 display: grid —— 没这句，所有 grid 属性都不生效，调试时先盯住这一行。