如何在保持网格列拉伸的同时对齐文本基线？

核心思路 #

当给Grid容器设置align-items: baseline时，网格项会根据内容基线收缩高度，导致背景无法铺满。要实现「容器拉伸+内容基线对齐」，需要拆分两个需求：让网格项铺满网格区域，同时让内部内容和右侧大字体基线对齐。

方案1：网格项拉伸 + 内部Flex基线对齐 #

这是最直观的方案，先让网格项自动铺满高度，再在内部用Flex控制内容对齐：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* 让网格项铺满网格高度 */
  gap: 10px; /* 可选，增加列间距 */
}

.text1 {
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: baseline; /* 内部内容基线对齐 */
  padding: 8px; /* 可选，添加上下内边距 */
}

.text2 {
  font-size: 2rem;
  padding: 8px; /* 和text1保持一致内边距 */
}

• 容器的align-items: stretch确保两个网格项高度一致，铺满整个网格行
• text1内部用Flex布局，通过align-items: baseline让文本和右侧大字体的基线对齐
• 统一添加上下内边距，避免内容贴边，视觉更协调

方案2：保留容器基线对齐 + 伪元素撑满背景 #

如果想保留容器的align-items: baseline，可以用绝对定位的伪元素来铺满网格项的背景：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline; /* 保持内容基线对齐 */
  gap: 10px;
}

.text1 {
  color: #fff;
  position: relative; /* 为伪元素提供定位参照 */
  padding: 8px;
}

.text1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: -1; /* 把背景放到文本下方 */
}

.text2 {
  font-size: 2rem;
  padding: 8px;
}

• 网格项依然会根据内容基线收缩，但伪元素会绝对定位铺满整个网格区域，视觉上背景是完整的
• z-index: -1确保背景不会遮挡文本内容

为什么你之前的方法无效？ #

• height: 100%：Grid布局中，网格项的高度默认由内容决定，除非容器有明确的固定高度，否则100%没有可参照的父级高度，无法生效
• align-self: stretch + align-content: baseline：align-content是针对多行Flex/Grid容器的属性，单个网格项使用完全无效，而且align-self: stretch会覆盖容器的align-items: baseline，导致内容不再基线对齐
• div背景容器+span：如果只是简单嵌套，背景容器的高度依然会被span的内容高度限制，没有设置让容器拉伸的规则，所以背景还是无法铺满

内容的提问来源于stack exchange，提问作者Arman