直接对 grid-template-rows 使用 transition 无效，因其为离散值属性，浏览器无法插值；应改用 max-height + overflow 配合 grid-area 实现过渡，兼顾动画、语义与布局稳定性。
为什么直接对 grid-template-rows 用 transition 无效
CSS Grid 的 grid-template-rows 是一个“离散值”属性，浏览器无法在 1fr 200px 和 1fr 0px 之间插值计算中间状态，所以加了 transition: grid-template-rows 0.3s 完全没反应。这不是你写错了，是 CSS 规范本身不支持。
用 max-height + overflow 配合 grid-area 实现过渡
这是目前最可靠、兼容性好（Chrome/Firefox/Safari 均支持）的方案：把卡片内容包裹进一个子容器，控制它的 max-height 和 overflow，同时保持 Grid 布局结构不变。
关键点：
- 卡片容器（grid item）保持固定网格位置，用
grid-area或显式行列定位，不参与高度变化 - 内部内容层设
max-height（展开时设为足够大的值，如500px；收起时设为0），并配overflow: hidden - 必须设置具体的高度单位（不能用
fit-content或auto），否则 transition 无法触发 - 过渡时间建议用
cubic-bezier(0.34, 1.56, 0.64, 1)模拟“弹性收放”，比线性更自然
示例片段：
.card {
display: grid;
grid-template-rows: auto 1fr;
}
.card__body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card.is-expanded .card__body {
max-height: 500px; /* 略大于内容实际高度即可 */
}
避免用 height: auto + transition 的陷阱
很多人尝试设 height: auto 再 transition，结果动画卡顿或直接跳变——因为 auto 不是可动画值，浏览器只能 fallback 到“瞬间切换”。
替代做法：
- 用 JS 先
getBoundingClientRect().height测出真实高度，再设为max-height（适合内容高度差异大、且需精确控制的场景） - 如果卡片内容高度相对固定，直接写死一个安全上限值（比如
max-height: 400px）更轻量，也避免 JS 介入 - 注意 padding/margin/border 会影响视觉高度，
max-height应包含这些（可用box-sizing: border-box统一）
Grid 中多卡片联动时的布局稳定性问题
当多个卡片在同一 grid 容器中展开/收起，它们的行高变化可能引发其他卡片“抖动”或重排——尤其用了 grid-auto-rows: minmax(200px, auto) 这类动态行高定义时。
稳定布局的要点：
- 给每张卡片的 grid item 设置明确的
grid-row（如grid-row: 1 / 2），避免依赖自动行分配 - 用
align-items: start或align-self: start防止内容撑开后影响垂直对齐 - 若需卡片间留白，优先用
gap而非 margin，gap 不参与尺寸计算，更可控
真正难的不是让一张卡片动起来，而是动的时候不让别的卡片“呼吸感失调”。max-height 方案看似绕路，但它是目前唯一能在 Grid 布局里兼顾动画、语义和稳定性的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
