必须拆开处理图片网格与details折叠逻辑：网格用纯CSS Grid布局，折叠由独立容器控制显隐；details内不嵌套布局敏感内容，避免渲染冲突、错位及动画卡顿。
直接用 details/summary 套图片网格，90% 的情况下会错位、塌陷或动画卡顿——这不是语义问题，是渲染机制冲突。必须拆开处理：图片网格走纯 CSS Grid 布局，折叠逻辑交给独立容器控制显隐，二者不嵌套、不共用过渡属性。
为什么不能把 img-grid 直接塞进 details
浏览器对 details 内部内容的重绘策略很保守：summary 展开瞬间，grid-template-columns 可能尚未计算完毕，导致列数错乱（比如该 3 列却只排 2 列）；更严重的是，details 自带的 display: block 重置行为会干扰 grid 容器的 display: grid 上下文，尤其在 Safari 和旧版 Chrome 中触发 layout thrashing。常见现象包括：图片高度忽高忽低、gap 间距消失、最后一行留白异常。
解决办法很简单：
- 把图片网格单独抽成一个 <div class="img-grid"></div>，不放在 details 内部
- 用 JS 控制该 div 的 hidden 属性或 max-height 过渡
- details 只保留标题和简短说明文字，不承载任何布局敏感内容
max-height 动画配图片网格时的高度预估陷阱
给图片网格容器加 max-height 过渡时，如果设 max-height: 500px 这种固定值，一旦图片数量动态变化（比如从 6 张变成 12 张），就会出现展开不全或留白过长。但又不能写 max-height: auto——CSS 不支持这个值做过渡。
稳妥做法是分两步：
- 图片网格容器始终设 overflow: hidden
- JS 展开前先临时取消 max-height，读取 scrollHeight，再设回带单位的数值
- 收起时设 max-height: 0，并监听 transitionend 后清空内联样式
示例关键逻辑：if (isOpen) { gridEl.style.maxHeight = gridEl.scrollHeight + 'px'; }else { gridEl.style.maxHeight = '0'; }
立即学习“前端免费学习笔记（深入）”；
移动端折叠后图片网格仍被屏幕阅读器读取的问题
单纯用 hidden 或 max-height: 0 不会移除可访问性树中的节点，屏幕阅读器仍会朗读所有图片的 alt 文本。这不是 bug，是 W3C 明确规定的：视觉隐藏 ≠ 语义隐藏。
正确做法是组合使用：
- 折叠状态时，给图片网格容器加 aria-hidden="true"
- 同时确保每个 <img alt="HTML中响应式图片与折叠面板结合的排版设计" > 的 alt 属性有意义（不能是空字符串或“图片”这种无信息文本）
- 如果网格内有 <figure></figure> + <figcaption></figcaption>，也要同步控制 aria-hidden 状态，否则图注会被单独读出
注意：display: none 虽然也能隐藏语义，但它会让父容器塌陷，影响页面流式布局，所以不推荐作为首选方案。
最常被忽略的一点：图片网格的 gap 值在折叠/展开动画过程中不能参与过渡——它会导致布局抖动。务必把 gap 写死在 CSS 里，不要用 JS 动态改，也不要试图给它加 transition。
