用repeat(auto-fit, minmax(250px, 100%))最稳妥，因auto-fit合并空轨道使列均分容器，minmax第二参数须为长度单位（如100%、400px）而非1fr，避免safari等浏览器退化；必须配父容器width: 100%、缩略图容器aspect-ratio及img{width:100%;height:100%;object-fit:cover}防变形。

用 max-width: 100% 是基础，但光靠它不够

单独写 img { max-width: 100%; height: auto; } 能防止溢出和拉伸，但它只解决单张图在容器内的缩放问题。一旦进入多图并排场景（比如画廊、卡片列表），就会立刻暴露缺陷：列数固定、小屏堆成一柱、高度参差不齐、DPR 高屏下模糊。

常见错误现象：

• 图片在手机上挤成窄条，但没换行 —— 实际是父容器没设 width: 100% 或 max-width，导致 max-width: 100% 失效
• 不同原始比例的图混排，网格行高忽高忽低 —— 缺少统一宽高比约束
• Retina 屏显示发虚 —— 没配合 srcset 提供 2x 图

grid-template-columns: repeat(auto-fit, minmax()) 怎么写才不翻车

这是当前最稳的响应式图片网格写法，但 minmax() 的第二个参数不能是 1fr —— 它不是“弹性分配”，而是“最大宽度”，必须是长度单位（px、%、vw）。

错误写法：minmax(200px, 1fr)（语法虽被部分浏览器容忍，但属非标准行为，Safari 15.4 之前会退化为单列）

正确写法示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• repeat(auto-fit, minmax(250px, 100%))：最小 250px，最大占满容器（适合卡片类）
• repeat(auto-fit, minmax(300px, 400px))：明确上限，防大屏下单图过宽
• 必须配合父容器 width: 100% 或 max-width: 1200px，否则 minmax() 没参照系
• 务必用 auto-fit，不是 auto-fill：前者会合并空轨道，让有内容的列自动拉伸填满

图片不变形的关键不在 img，而在它的父容器

直接对 img 设 width: 100%; height: 100% + object-fit: cover 会失败——因为 Grid 行高由内容撑开，而每张图原始比例不同，导致容器高度不一致。

真正可靠的做法：

• 每个 img 必须包一层 <div>，该 <code>div 设 aspect-ratio: 4/3（或你想要的比例）
• img 内部设 width: 100%; height: 100%; object-fit: cover;
• 若需兼容 Safari 15.4 以下，改用伪元素 + padding-top 技巧模拟 aspect-ratio
• 避免给 img 单独设 height 像素值，高 DPR 屏易出现 0.5px 渲染断裂

别碰 position 做响应式图片网格

用 position: absolute 手动排图，看似可控，实则无法响应容器宽度变化。小屏下图片横向溢出、top/left 像素值在不同设备上偏移、换行完全失效——这些都不是 bug，是定位机制的必然结果。

真实限制：

• 脱离文档流，Grid/Flex 的自动换行、gap、对齐等能力全部失效
• 无法与 srcset / sizes 协同工作，高清屏大概率加载错尺寸图
• 动画、焦点管理、可访问性语义全丢失
• 调试时 Chrome DevTools 的 layout 面板无法反映真实布局关系

复杂点往往藏在细节里：比如 aspect-ratio 在旧版 Safari 中需降级，gap 在 flex-wrap 场景中不如 grid 可靠，minmax() 的最小值低于 180px 可能在某些安卓 WebView 中触发渲染异常。这些不是边缘情况，是上线前必须验证的真实断点。