repeat(auto-fill, minmax(250px, 1fr))能自动适配图片数量，因为auto-fill按容器宽度尽可能多地预占等宽列位（最小250px），空列保留、结构稳定；minmax中1fr为弹性上限，实际列宽由容器均分决定，配合gap、aspect-ratio和object-fit可防变形与塌陷。
为什么 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) 能自动适配图片数量？
因为 auto-fill 会让 Grid 尽可能多地“填入”满足 minmax(250px, 1fr) 的列——只要容器够宽，就多塞一列；不够了就换行。它不依赖图片张数，只看容器宽度和单列最小宽度。
常见错误是写成 auto-fit 却没意识到两者差异：auto-fill 保留空列（适合画廊需要对齐的场景），auto-fit 会合并空列（可能导致最后一行拉伸变形）。
-
minmax(250px, 1fr)表示每列至少 250px，剩余空间均分——避免小屏下图片被压扁 - 别用固定列数如
repeat(4, 1fr)，否则窄屏会水平滚动或溢出 - 如果图片原始尺寸差异大，记得加
img { width: 100%; height: auto; }防止拉伸失真
图片容器必须设 display: grid，但父级要加什么关键样式？
仅设 display: grid 不够——缺了 gap 会导致图片紧贴，缺了 max-width 可能在超大屏下撑满整行显得稀疏。
推荐直接在画廊容器上写：
gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 1rem;
padding: 1rem;
}
-
gap比用margin更可靠：它不触发外边距合并，且自动处理网格边界留白 - 别给
gallery设width: 100%—— 它默认块级已占满，加了反而可能嵌套时出问题 - 若需限制最大宽度（比如居中+留白），用
max-width: 1200px; margin: 0 auto;，而非固定width
图片加载后高度塌陷？aspect-ratio 是解但兼容性怎么兜底？
现代浏览器支持 img { aspect-ratio: 4/3; }，可防瀑布流式错位；但 Safari 15.4 以下、旧版 Firefox 不支持。
兜底方案不是 JS 计算，而是用伪元素 + padding-bottom 技巧：
.gallery-item {
position: relative;
}
.gallery-item::before {
content: "";
display: block;
padding-bottom: 75%; /* 4:3 → 3/4 = 0.75 */
}
.gallery-item img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
- 把每张图包一层
<div class="gallery-item"><img></div>是必须的——Grid 列由这些容器构成，不是直接作用于img -
object-fit: cover比contain更适合画廊：保证填满且不露白边 - 如果后端能统一返回带宽高的图片，优先用
aspect-ratio，更轻量；否则才上伪元素方案
移动端点击放大图片，CSS Grid 会崩吗？
不会崩，但默认行为会破坏布局——因为 position: fixed 的模态框脱离文档流，而原 grid 区域还在，导致页面“跳动”或留白。
真正要处理的是体验断层：
- 放大前先记录当前图片在 Grid 中的位置（用
getBoundingClientRect()），再动画过渡到居中，比直接scale(2)更自然 - 不要在
img上直接加transform——Grid 容器有gap，缩放后会盖住相邻项；应包裹一层<div class="modal-img"> 单独定位<li>触摸设备需加 <code>@media (hover: none) and (pointer: coarse)关闭:hover效果，避免误触
Grid 本身足够健壮，复杂交互的问题从来不在 Grid，而在如何让新层与原布局共存。这点容易被忽略：你调的是 CSS，但用户感知的是动效节奏和层级关系。
