grid 布局需四层约束：包裹层设 aspect-ratio 与 min-height、img 带 width/height 属性、gap 用 clamp() 响应、统一 gallery-item 比例并用 object-fit 裁剪。

只写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 肯定跑不通——它连最基础的图片不塌陷都做不到，更别说防跳动、控比例、适配弱网。

为什么 auto-fit + minmax() 会塌陷或错位

不是语法错了，是 Grid 只分配了宽度，没管高度。当图片加载前高度为 0，Grid 行高塌成一条线，后续所有格子全错位。常见现象包括：首屏加载时图片“唰一下往下掉”、混排 4:3 和 1:1 图片时整行右偏、安卓 WebView 中列数卡死不变。

• auto-fit 会合并空轨道，让有图的列拉伸填满——这在内容不均时反而放大变形
• minmax(250px, 1fr) 的 1fr 是上限，不是目标；实际列宽 = 容器总宽 ÷ 列数，而列数由 250px 是否能塞下决定
• iPhone SE 屏宽仅 375px，减去左右 padding 和 gap 后，250px 已逼近极限，极易退化为单列但留大片空白

必须加的四个容器层约束

Grid 控布局，但图片不变形、不跳动、不拉伸，全靠包裹层。只样式化 img 标签本身，90% 的问题都出在这儿。

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

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

下载

• 每个图片必须包一层 <div class="gallery-item"> 或 <code><figure></figure>
• .gallery-item 必须设 aspect-ratio: 4/3（或你期望的比例），不能写在 img 上
• .gallery-item 必须有 min-height: 150px（略大于 aspect-ratio 对应高度），防加载前塌陷
• img 标签必须带 width 和 height 属性（如 width="800" height="600"），让浏览器提前预留空间

gap 怎么写才真响应，不靠媒体查询

固定 gap: 1rem 在小屏上占视觉比重太大，纯百分比又不被支持。硬编码断点反而增加维护成本。

• 用 gap: clamp(0.5rem, 3vw, 1rem)：小屏最小 0.5rem，中屏随视口缩放，大屏封顶 1rem
• 别单独设 row-gap 或 column-gap，除非你明确需要行列间距不同
• 如果父容器有 padding: 1rem，再配 gap: 1rem，边缘视觉间距就是 2rem，得提前协调
• Safari 15.4+ 才完整支持 clamp()，旧版可降级为 gap: 0.75rem

混排不同宽高比图片时怎么稳住网格

直接丢一堆 16:9、4:3、1:1 的图进去，auto-fit 会让窄图被拉宽、高图被多裁，auto-fill 又容易留空列漂移。真实项目里，没人能保证后端返回的图尺寸统一。

• 优先用 auto-fill + 明确最小宽度（如 minmax(240px, 1fr)），它按最小值预占等宽轨道，结构更稳定
• 每张图的 .gallery-item 都设相同 aspect-ratio（比如统一 4/3），内部用 object-fit: cover 裁剪
• 避免对 img 直接设 height，否则在高 DPR 设备下易出现像素断裂
• 别用 background-image 模拟——语义丢失，SEO 和可访问性受损
真正卡住多数人的，从来不是 repeat() 怎么写，而是容器没宽高参照、图片没包裹层、gap 没随视口缩放、加载前没预留空间——四个点漏一个，画廊就崩。