- A+
在使用 CSS Grid 布局时，子元素换行后的高度控制常让人困惑，尤其是当使用 grid-auto-rows 和 line-height 时。很多人发现即使设置了固定行高，Grid 容器的自动行却未按预期表现。本文通过实际案例说明如何正确控制 Grid 子元素换行时的高度。
理解 grid-auto-rows 的作用
grid-auto-rows 用于定义 Grid 容器中隐式生成的行的高度。当你没有显式用 grid-template-rows 定义所有行时，新增的行会使用 grid-auto-rows 的值。
例如：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 60px;
}
这表示每行隐式创建的高度为 60px，无论内容多少。但若子元素本身有内联内容（如文字），其 line-height 可能影响视觉高度，造成“高度不一致”的错觉。
line-height 对 Grid 子元素的影响
当 Grid 子元素包含文本且未设置垂直对齐或高度限制时，line-height 会直接影响其最小高度。即使 grid-auto-rows: 40px，如果子元素的字体大小为 16px，line-height: 2，实际行高为 32px，加上默认的盒模型可能撑开容器。
常见问题：换行后某些格子看起来“更高”，其实是文本换行导致多行显示，叠加了 line-height。
AI服装模特、商品图，可商用，低价提升销量神器
38
查看详情
解决方法：
- 限制子元素的 height 或 min-height
- 设置 line-height: 1 或具体数值，避免相对单位放大
- 使用 overflow: hidden 防止内容溢出影响布局
实践案例：等高卡片布局
假设我们要做一个响应式卡片网格，每行三列，每张卡片高度统一为 80px，包含一行文字。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 80px;
gap: 10px;
}
.card {
font-size: 16px;
line-height: 1.5; /* 24px 行高 */
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
这里虽然 grid-auto-rows: 80px 确保了每行高度，但若卡片内容过多导致文本换行，line-height 叠加会使内容区域超过 80px。因此需额外控制：
- 给 .card 设置 overflow: hidden
- 使用 line-clamp 限制行数
- 或设 min-height: 0 防止内容撑开
总结与建议
控制 Grid 子元素换行高度的关键在于：
- grid-auto-rows 设定隐式行高，是整体布局的基础
- line-height 影响内容渲染高度，需合理设置
- 子元素应避免内容自然撑开，可通过 flex、overflow 或限制行数来约束
基本上就这些。只要理清 Grid 行高与内联内容的关系，就能实现稳定一致的网格布局。
