正确写法是用 minmax(250px, 1fr) 配合 auto-fit、width: 100%、gap 和 aspect-ratio；避免 safari 缓存偏差与 dense 破坏语义。
grid-template-columns: repeat(auto-fill, minmax(...))) 怎么写才不塌陷
多数人抄了 repeat(auto-fill, minmax(300px, 1fr))) 发现小屏下图片挤成一列还留大片空白，本质是没理解 minmax() 的两个参数作用：第一个是“最小宽度”，第二个是“最大可伸展宽度”。当容器比单个 minmax() 最小值还窄时，浏览器宁可让列宽压缩到接近 0，也不愿换行——因为 auto-fill 会强行填满整行。
正确做法是把最小值设得足够保守，比如 250px（对应手机横屏），并确保父容器有 width: 100% 或明确的 max-width；同时加 gap 避免子项 margin 干扰计算：
gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 1rem;
width: 100%;
}-
minmax(250px, 1fr)中的1fr不代表“占满剩余空间”，而是“等分可用空间”，所以列数由容器宽度 ÷ 250px 向下取整决定 - 如果用
auto-fit替代auto-fill，空列会被自动收缩掉，更适合不确定子项数量的画廊 - 别在
img上设固定width: 100%，应配合object-fit: cover和height: 100%防止拉伸变形
图片高度不一致导致网格错位怎么办
CSS Grid 按行布局，但默认不强制每行高度统一。当某张图特别高，它会撑开整行，下面的行就和它错开——这不是 bug，是 Grid 的正常行为。
解决方式不是给 img 设固定高（会裁切），而是控制网格项容器的高度基线：
立即学习“前端免费学习笔记（深入）”；
.gallery-item {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
aspect-ratio: 4/3; /* 推荐：替代 height，更可靠 */
}
<p>.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}-
aspect-ratio是关键，现代浏览器支持良好；若需兼容旧版，可用 padding-top 百分比 hack，但维护成本高 - 避免用
min-height+flex，容易触发 Grid 的隐式行高计算异常 - 如果后端返回的图尺寸差异极大（比如 16:9 和 1:1 混排），建议前端统一裁剪或服务端生成缩略图，CSS 解决不了语义级不一致
Grid 画廊在 Safari 里列数突变或不响应
Safari（尤其 iOS 15 及更早）对 auto-fill 和 minmax() 的解析有缓存偏差：首次加载可能按视口宽度计算列数，旋转屏幕后不重算，导致列数卡死。
临时缓解方案是在容器上加一个无副作用的重排触发器：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 1rem;
/* Safari 重排 hack */
counter-reset: safari-fix;
}- 更稳妥的做法是监听
resize事件，动态更新style.gridTemplateColumns，但注意节流，避免频繁重排 - 不要用
vw单位代替 px 做minmax()最小值，Safari 对minmax(20vw, 1fr)支持不稳定 - 确认没有外层元素设置了
transform或will-change，这些会干扰 Safari 的 Grid 布局计算
要不要加 grid-auto-flow: dense
加了它，Grid 会主动填满空缺位置，看起来更紧凑。但实际画廊场景几乎不需要——因为图片是顺序排列的内容流，人为打乱 DOM 顺序会影响可访问性（screen reader 读序错乱）、SEO（内容权重偏移）、以及用户预期（下滑时突然跳回前面的图）。
-
grid-auto-flow: dense只适合纯视觉卡片墙（如仪表盘图标），且所有卡片语义等价 - 真正需要“紧凑”效果时，优先调小
minmax()的最小值，或改用auto-fit - 一旦启用
dense，就不能再依赖:nth-child()做样式区分，因为视觉顺序和 DOM 顺序已脱钩
响应式画廊的复杂点不在代码多寡，而在对 minmax() 行为、浏览器 layout 触发时机、以及内容语义边界的持续校准。写完记得在 iOS Safari 真机横竖屏切换三次，再看一眼 tab 键导航顺序。
