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> 项不起“拆行”作用，它只管这个 <p></p> 放在哪一行轨道里
• 若真想让每行文字占一个网格轨道，得把每行文字单独包成一个元素（如多个 <span></span> 或 <div>），再用 <code>grid-row 分配

  align-items: center 对多行文本无效的典型场景

  align-items: center 确实能让网格项在交叉轴（通常是垂直方向）居中，但它生效的前提是：该网格项有明确的高度，且容器有足够空间可“居中”。而多行文本所在的元素如果没设 height 或 min-height，它的高度就是内容撑开的，align-items 就失去参照基准。

  常见错误现象：写了 align-items: center，文字依然贴顶；或换行后上下参差不齐。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 必须给文字容器（如 <div class="text-box">）设 <code>height 或 min-height，例如 min-height: 120px
  • align-items 控制的是整个网格项（比如那个 <div>）的位置，不是控制它里面每一行文字的 baseline <li>多行文字水平居中还得靠 <code>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></p> 设 text-align: center

  最易被忽略的一点：多行文本的“行高一致性”往往比居中更难调——line-height 和 padding 微小差异，在 align-items: center 下会被放大成明显错位。建议所有文字块统一用 line-height: 1.5 和固定 padding，而非依赖内容自适应。