用 display: grid 实现响应式画廊需在父容器设 grid 布局，用 repeat(auto-fit, minmax()) 控制列数，配合 gap、aspect-ratio 和 object-fit 保障多媒体适配；IE 等旧浏览器应降级为流式或 column-count 布局。
用 display: grid 控制图片/视频容器的行列分布
Grid 的核心是定义容器如何划分空间，不是给每个子项加样式。画廊布局的关键在于提前规划列数、间隙和响应行为，而不是靠 float 或 inline-block 挤出来。
常见错误是直接在 img 或 video 上写 grid-column，结果发现没效果——因为 Grid 属性只对直接子元素生效，且必须作用在父容器上。
- 父容器设
display: grid，再用grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))实现等宽自适应列 - 用
gap: 1rem统一内外边距，避免手动写margin导致错位 - 多媒体元素本身设
width: 100%和height: auto，防止拉伸变形；视频加object-fit: cover更稳妥
处理不同尺寸的图片和视频时的对齐问题
画廊里混用竖图、横图、短视频，容易出现高度不一致、文字截断或底部留白。Grid 本身不解决内容适配，得靠子项的约束逻辑补位。
典型现象：某张竖图撑高整行，后面所有项目都跟着变高，浪费空间。
立即学习“前端免费学习笔记（深入）”；
- 给每个媒体容器（如
.gallery-item）设display: flex+flex-direction: column，让内部元素可控制对齐 - 图片/视频统一套一层
div作“占位盒”，设aspect-ratio: 4/3或aspect-ratio: 1/1，强制比例 - 内容超出时用
overflow: hidden，比max-height更可靠——后者可能被 Grid 行高覆盖
响应式断点里 grid-template-columns 怎么写才不崩
很多人用 @media 反复重写 grid-template-columns，结果小屏下列数突变、间隙错乱。其实 Grid 支持单条声明内响应，更简洁也更可控。
错误写法：grid-template-columns: 1fr 1fr; @media (max-width: 768px) { grid-template-columns: 1fr; } ——维护成本高，且易漏掉 gap 同步调整。
- 优先用
repeat(auto-fit, minmax(300px, 1fr))，浏览器自动计算列数，无需断点 - 真要断点时，在同一规则里改
minmax()的最小值，比如从minmax(300px, 1fr)改成minmax(200px, 1fr) - 慎用
fr单位嵌套：比如grid-template-columns: 2fr 1fr在小屏下会挤压，不如全用minmax()+auto-fit
IE 不支持 Grid？别硬扛，用降级方案保底
现在多数项目已放弃 IE，但仍有内网系统或政企客户要求兼容。强行 polyfill display: grid 基本无效，得接受“降级为单列流式布局”这个事实。
常见翻车点：加了 @supports (display: grid) 包裹，但忘了写 fallback 规则，导致 IE 下整个画廊消失。
- 先写基础流式样式（
display: block+width: 100%），再用@supports覆盖 Grid 规则 - 避免依赖
grid-area命名区域做布局，IE 无法解析，会导致整个 Grid 声明失效 - 如果必须多列，用
column-count代替——它兼容 IE10+，虽不能精确控制每项位置，但至少能分栏
aspect-ratio 的浏览器支持度。Chrome 88+、Firefox 89+ 才稳定支持，旧版 Safari 需要 padding-top 百分比 hack。别指望一个 CSS 属性搞定所有设备的缩略图高度一致性。 
