Grid 布局行高不一致主因是内容高度差异、grid-auto-rows 仅作用于隐式行，以及子项的 min-height 或 align-self 影响；统一高度应优先用 grid-template-rows 配合 repeat()，辅以 overflow 控制和 align-self 调整。
Grid 布局中行高不一致，通常是因为内容高度不同、grid-auto-rows 设置不合理，或子项设置了 min-height / align-self 等影响对齐的属性。想让所有行高度统一，关键不是强行拉伸内容，而是用 grid-auto-rows 配合合理的行为控制。
明确 grid-auto-rows 的作用范围
grid-auto-rows 只对**隐式创建的行轨道**生效（即超出显式定义的 grid-template-rows 之外的行）。如果你已经写了 grid-template-rows: 100px 200px;，那前两行高度是固定的，后续新增的行才由 grid-auto-rows 决定。
- 要统一所有行（包括显式定义的），建议直接用
grid-template-rows: repeat(auto-fill, 120px);或repeat(auto-fit, 120px) - 若需响应式统一高度，可写
grid-template-rows: repeat(auto-fit, minmax(120px, 1fr))，但注意这会让每行“至少”120px，不是严格等高 - 真正强制等高：用
grid-template-rows: repeat(3, 120px)（适合已知行数）或配合 JS 动态计算后注入 CSS 变量
避免内容撑开行高
即使设了 grid-auto-rows: 120px，如果某个子项内部有长文本、图片或设置了 min-height，仍可能突破该高度——因为 grid 默认是 stretch 对齐，且行高是“最小高度”，不是“最大限制”。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 给子项加
overflow: hidden或text-overflow: ellipsis控制溢出 - 设置
align-self: start或center，防止 stretch 拉伸子项占满整行 - 移除子项上可能存在的
min-height、height: 100%或display: flex的默认交叉轴行为
用 fr 单位实现弹性但等比行高
如果希望所有行按相同比例分配剩余空间（比如每行占 1/5），可用 grid-template-rows: repeat(5, 1fr)。这样无论容器多高，5 行始终均分空间，视觉上高度一致。
立即学习“前端免费学习笔记（深入）”；
- 适合卡片列表、仪表盘等固定行数场景
- 结合
minmax(0, 1fr)可防止内容溢出导致行高异常（尤其配合 overflow: hidden 时） - 注意：fr 是分配“剩余空间”，所以容器必须有明确高度（如
height: 500px或min-height），否则 fr 会退化为 auto
调试小技巧：快速定位哪一行被撑开了
在浏览器开发者工具中临时添加：
-
* { outline: 1px solid red !important; }查看真实布局边界 - 选中 grid 容器 → Elements 面板右侧 “Layout” 标签 → 勾选 “Show grid line numbers” 和 “Highlight grid tracks”
- 检查具体子项的 computed height、margin、padding、border 是否意外增大了行高
