grid-template-rows 控制网格轨道而非文本换行，多行文本需靠容器高度、align-items 和 text-align 协同实现视觉多行，不能依赖 grid-template-rows 拆分文字行。
多行文本在 Grid 中不是“自动换行成多行网格项”，而是作为单个网格项里的内联内容；想让它视觉上多行排列，得靠容器高度 + align-items + text-align 协同控制，不是靠 Grid 的行列定义本身。
为什么 grid-template-rows 不能直接控制多行文本的行高
grid-template-rows 定义的是**网格轨道（grid tracks）**，即容器里划分出的“行槽”，它影响的是子元素（网格项）的垂直分布位置，而不是子元素内部文字的换行行为。一段 <p>这是一段很长的文字，会自动折行</p> 仍是单个网格项，它的换行由 line-height、width 和内容长度决定，和你设了 grid-template-rows: 40px 40px 没关系。
常见错误现象：grid-template-rows: repeat(3, 40px) 写了，但文字还是挤在第一行里，或者溢出容器——因为没限制文字容器宽度，也没给它明确高度约束。
- 文字换行只发生在块级容器内部，且依赖其
width和white-space -
grid-template-rows对单个<p>项不起“拆行”作用，它只管这个<p>放在哪一行轨道里 - 若真想让每行文字占一个网格轨道，得把每行文字单独包成一个元素（如多个
<span>或<div>），再用grid-row分配
align-items: center 对多行文本无效的典型场景
align-items: center 确实能让网格项在交叉轴（通常是垂直方向）居中，但它生效的前提是：该网格项有明确的高度，且容器有足够空间可“居中”。而多行文本所在的元素如果没设 height 或 min-height，它的高度就是内容撑开的，align-items 就失去参照基准。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：写了 align-items: center，文字依然贴顶；或换行后上下参差不齐。
- 必须给文字容器（如
<div class="text-box">）设height或min-height，例如min-height: 120px -
align-items控制的是整个网格项（比如那个<div>）的位置，不是控制它里面每一行文字的 baseline - 多行文字水平居中还得靠
text-align: center，且必须写在文字容器上，不能只写在 grid 容器上 - 如果文字直接写在 grid 容器里（无包裹元素），
text-align可能不生效，因为纯文本节点不响应块级对齐
用 grid-auto-rows + align-content 实现“多行文字块”的垂直分布
当你要排的是多个独立的多行文字块（比如卡片列表里的标题+描述），且希望这些块整体在容器中垂直居中或均匀分布，align-content 才真正起作用——但它要求容器有多行隐式轨道，且总高度小于容器高度。
关键条件缺一不可：
- 容器设固定
height（如height: 400px），不能是auto - 用
grid-template-columns定义列数（如repeat(3, 1fr)），但**不写grid-template-rows**，让 Grid 自动创建隐式行 - 设置
grid-auto-rows: 80px，确保每个多行文字块高度一致（或至少有底线） - 加上
align-content: center或space-between，才能看到多行块之间的整体对齐效果
注意：align-content 对单个文字块内部的多行没影响，它只管“块与块之间”的垂直间距分配。
响应式多行文字网格的稳妥写法
要让多行文字在不同屏幕下始终居中、不溢出、换行合理，推荐组合使用 minmax() + auto-fit + 显式文字容器封装：
- Grid 容器用
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))); gap: 16px; - 每个文字块用
<div class="card"><h3>标题</h3><p>多行描述</p></div>包裹 -
.card设min-height: 100px、display: flex+flex-direction: column+justify-content: center，比纯 Grid 更可控 - 若坚持用 Grid 布局文字块内部，
.card需设display: grid; height: 100%; align-items: center;，再对<p>设text-align: center
最易被忽略的一点：多行文本的“行高一致性”往往比居中更难调——line-height 和 padding 微小差异，在 align-items: center 下会被放大成明显错位。建议所有文字块统一用 line-height: 1.5 和固定 padding，而非依赖内容自适应。
