如何在CSS Grid区域间对齐不同字号的文本？

我懂你现在的头疼点——用Grid布局时，不同字号的文本怎么都没法对齐到同一底部基线对吧？看了你的代码，问题出在两个地方：一是你给.timer-label加了flex布局，干扰了Grid单元格的对齐上下文；二是Grid容器本身没设置针对文本基线的对齐规则。

直接上解决方案，修改后的代码如下：

.timer { 
  display: grid; 
  grid-template-rows: 1fr; 
  grid-template-columns: 1fr auto auto 1fr; 
  grid-template-areas: "status status status timer"; 
  align-items: baseline; /* 关键：让Grid单元格内元素按基线对齐 */
} 
.timer-label { 
  grid-area: status; 
  font-size: calc(1em + 3vw); 
  background-color: blue; 
  /* 去掉flex相关属性，避免干扰基线对齐 */
} 
.timer-value { 
  grid-area: timer; 
  font-size: calc(1em + 9vw); 
  background-color: green; 
} 

<div class="timer"> 
  <div class="timer-label"> 
    <span>Processing...</span> 
  </div> 
  <div class="timer-value"> 
    <span>00:55</span> 
  </div> 
</div>

为什么这样能生效？ #

• align-items: baseline是Grid容器的核心设置，它会让每个Grid单元格里的元素，以自身的文本基线作为对齐基准，不管元素字号多大，都能把底部基线对齐到同一水平线。
• 之前你给.timer-label加了display: flex和align-items: flex-end，这其实是让flex容器内部的元素底部对齐，但Grid单元格本身的对齐没设置，导致两个单元格的基线不在同一位置，自然文本就对不齐了。去掉flex属性后，.timer-label回到正常的块级元素上下文，就能和.timer-value一起遵循Grid的基线对齐规则了。

这样修改后，"Processing..."和"00:55"的底部基线就会完美对齐到你想要的红线位置啦～

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