grid-template-rows: 1fr 会强制卡片等高，但仅当显式定义且所有卡片位于同一网格行时生效；默认 grid-auto-rows: auto 不等高，需配合 grid-auto-rows: 1fr 或显式行定义及 align-items: stretch 才能实现可靠等高。
grid-template-rows: 1fr 会强制卡片等高吗
会，但只在显式定义了 grid-template-rows 且所有卡片在同一行（同一 grid row）时才生效。常见误区是以为只要用了 display: grid 就自动等高——其实默认是 grid-auto-rows: auto，内容多的卡片依然会撑高整行。
真正起作用的是把卡片放在同一个隐式或显式 grid 行里，并让该行高度由最高项决定。最稳妥做法是用 grid-template-rows: 1fr 配合 grid-auto-flow: column 或明确划分列数：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* 关键：让每行所有卡片共享同一行高 */
}- 别只写
grid-auto-rows: 1fr却漏掉grid-template-columns，否则可能退化成单列流 - 如果卡片数量不固定，优先用
grid-template-rows: 1fr+grid-auto-flow: row，再配合align-items: stretch（默认值，但显式写上更安心） - Firefox 对
grid-auto-rows: 1fr在动态内容下的渲染偶尔有延迟，可加min-height: 0到卡片内部容器防 collapse
卡片内文字溢出导致高度失控怎么办
等高布局下，text-overflow: ellipsis 必须配合固定行数和 display: -webkit-box，但 grid 本身不控制子元素内部排版。一旦某张卡片文本过长又没截断，它就会突破 1fr 行高，把整行拉高，破坏等高效果。
解决核心是「限制卡片内容区域的弹性，而非依赖 grid 自动均分」：
立即学习“前端免费学习笔记（深入）”；
- 给卡片内容区（比如
.card-body）设height: 100%+min-height: 0（防止 flex/grid 子项默认最小尺寸干扰） - 多行省略必须用
display: -webkit-box+-webkit-line-clamp，纯text-overflow对块级无效 - 避免在卡片内用
height: fit-content或min-height: max-content，它们会绕过 grid 的行高分配逻辑
IE11 兼容场景下 grid 等高失效怎么兜底
CSS Grid 在 IE11 中对 1fr 的实现有偏差：它把 1fr 当作“剩余空间均分”，但若某卡片含浮动、绝对定位或未清除的伪元素，IE11 可能计算错可用高度，导致卡片高度不一致。
真实项目中，如果必须支持 IE11，别强依赖 grid-auto-rows: 1fr：
- 用 JavaScript 补齐：遍历每行卡片，取
Math.max(...rowCards.map(el => el.scrollHeight))，再统一设min-height - 改用
display: flex+flex-wrap: wrap，配合 JS 计算行高（比 grid 更可控） - 如果只是视觉等高（非严格布局需求），可用
padding-bottom+margin-bottom: -9999px+overflow: hidden模拟，但语义性差，慎用
响应式断点里 grid-template-columns 改变后等高还成立吗
成立，但前提是每套断点下都保持 grid-auto-rows: 1fr（或显式 grid-template-rows）。问题常出在媒体查询里只改了列数，忘了重置行行为。
例如从 3 列切到 2 列时，若没同步更新 grid-auto-rows，旧规则可能残留，尤其当使用 @supports (display: grid) 嵌套时：
- 每个断点里都显式声明
grid-auto-rows: 1fr，不要依赖继承 - 避免用
grid-template-areas实现等高，它在响应式切换时容易因命名不匹配导致空白行 - 移动端单列时，
1fr失去意义（每行仅 1 卡），此时应切回grid-auto-rows: auto并靠内容自然排列
等高不是魔法，是 grid 行盒（grid row box）对子项的拉伸行为。只要行盒存在、高度可计算、子项没逃逸出拉伸范围，它就工作。最容易被忽略的是子项内部的 min-height、overflow 和 display 类型——它们不动声色地切断了拉伸链。
