<details>放入grid容器后展开不会触发动态等高，因<summary>是替换元素导致父项尺寸固化；应监听toggle事件用JavaScript同步minHeight，并修复overflow、display及动画问题。
details标签默认不触发CSS网格等高行为
直接把 <details> 放进 display: grid 容器里，展开后卡片高度变化不会重新触发网格的等高对齐（即 align-items: stretch 不会动态重算）。这是因为 <details> 的 <summary> 是替换元素，其内部内容高度变化时，父网格项的基线和尺寸计算已固化，浏览器不会主动回溯更新整行高度。
实操建议：
- 给
<details>设置grid-row: span 2或更多（需预估最大展开高度对应的行数），但不可靠，响应式下易错位 - 更稳妥的做法：用
grid-template-rows: subgrid（仅 Firefox 支持，暂不可商用） - 主流解法是放弃依赖网格自动等高，改用 JavaScript 监听
toggle事件后手动同步高度
用JavaScript监听toggle事件同步卡片高度
<details> 元素在用户点击时触发 toggle 事件（不是 click），这是唯一可靠的展开/收起钩子。此时需遍历同组卡片，取最大 offsetHeight 并统一设为 min-height，避免动画撕裂。
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.card-group details').forEach(card => {
card.addEventListener('toggle', () => {
const group = card.closest('.card-group');
const cards = group.querySelectorAll('details');
const maxHeight = Math.max(...Array.from(cards).map(c => c.offsetHeight));
cards.forEach(c => c.style.minHeight = `${maxHeight}px`);
});
});
注意点：
- 必须用
minHeight而非height，否则收起时无法自然收缩 - 首次加载时需手动触发一次同步，否则初始高度不一致
- 若卡片内有图片或异步内容，需在
img.onload或requestAnimationFrame中再次同步
Grid列数与details宽度适配的隐藏陷阱
当 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 遇到展开的 <details>，其内部内容可能溢出导致换行，视觉上破坏“卡片”感。这不是网格问题，而是 <summary> 默认 display: list-item，且 <details> 无内置 overflow: hidden。
必须加的 CSS 修复：
- 给
<details>设overflow: hidden和contain: layout style（提升重排性能） - 给
<summary>设display: block，并禁用默认箭头：list-style: none、padding-left: 0 - 若用 CSS 自定义展开箭头，需确保
::marker不干扰网格流，推荐用background-image替代
移动端触摸下details折叠体验卡顿
iOS Safari 和部分安卓 WebView 中，<details> 展开动画默认无过渡，直接跳变，且 toggle 事件延迟明显（尤其在复杂卡片中）。单纯加 transition: height 0.3s 无效，因为 height 是 auto。
可行方案：
- 用
max-height+transition模拟（需预设足够大的max-height值，如500px） - 配合
@media (prefers-reduced-motion)关闭过渡，避免残障用户不适 - 真机测试时发现：Safari 对
details[open]的样式重绘较慢，建议收起时用setTimeout(() => { el.style.minHeight = '0' }, 300)延迟清除，留出动画余量
细节决定成败——<details> 看似简单，但和 Grid、移动端、可访问性三者交叠时，每个浏览器的实现偏差都会暴露出来。别信“开箱即用”，先测 iOS、再测折叠动画、最后看屏幕阅读器是否正确播报状态。
