Grid单元格高度过高应通过grid-auto-rows配合minmax()或clamp()约束行高，避免使用固定grid-template-rows，辅以overflow: hidden、文本行数限制和Object-fit等控制内容溢出，并关闭align-items: stretch默认拉伸行为。
Grid网格布局中单元格高度过高，通常是因为内容撑开或行高未受控。解决的关键不是单纯设height，而是用grid-auto-rows配合minmax()或clamp()主动约束自动创建的行高，同时避免align-items: stretch等默认拉伸行为干扰。
用auto-rows替代grid-template-rows灵活控高
当行数不确定（比如动态列表），别硬写grid-template-rows: 100px 100px 100px——既难维护又无法响应内容变化。改用grid-auto-rows统一管理所有自动生成的行：
-
grid-auto-rows: 80px：每行强制固定80px，内容溢出时会被裁剪（需配合overflow: hidden） -
grid-auto-rows: minmax(60px, 120px)：行高至少60px，最多120px，内容少时不压缩，多时截断 -
grid-auto-rows: minmax(0, 1fr)：让多余空间均分，但单行不无限膨胀（minmax(0, ...)是关键）
内容溢出时主动截断，而非放任撑高
即使设了grid-auto-rows，文字、图片仍可能撑破容器。需叠加以下控制：
- 给单元格加
overflow: hidden，防止内容外溢影响布局 - 对文本加
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;限制行数 - 图片用
object-fit: cover; height: 100%，避免原始尺寸破坏网格结构
检查隐式拉伸行为，关闭不必要的stretch
Grid默认align-items: stretch会让子项填满行高，哪怕内容很短。若不需要填满，显式覆盖：
-
align-items: start：子项顶部对齐，高度由内容决定 -
align-self: start：仅针对某个单元格单独设置 - 配合
justify-items: center可居中且不拉伸
基本上就这些。核心是把“让Grid自己算高度”转为“我定义高度规则”，auto-rows + minmax + overflow组合拳比死磕height更稳定可靠。