如何用CSS Grid让网格列元素高度匹配同行最大高度并实现直分隔线

要实现每行所有列高度自动匹配该行最大高度，关键是调整布局结构，让CSS Grid直接管理行和列，而不是在列内嵌套独立的行容器。以下是基于Tailwind的实现方案：

核心思路 #

• 避免给每个列单独做纵向嵌套布局（比如flex-col），这种结构下列与列之间的行高度无法自动同步
• 把整个内容区域设为一个单Grid容器，定义目标列数（比如3列）
• 每个内容块直接作为Grid的单元格，CSS Grid会自动让同一行的所有单元格高度统一为该行最高元素的高度
• 通过给单元格添加边框来实现笔直的分隔线

示例代码 #

<div class="grid grid-cols-3 gap-0 border border-gray-300">
  <!-- 第一行 -->
  <div class="p-4 border-r border-gray-300">第一列第一行内容<br>多一行文本</div>
  <div class="p-4 border-r border-gray-300">第二列第一行内容</div>
  <div class="p-4">第三列第一行内容</div>
  
  <!-- 第二行 -->
  <div class="p-4 border-t border-r border-gray-300">第一列第二行内容</div>
  <div class="p-4 border-t border-r border-gray-300">第二列第二行内容<br>额外两行<br>文本内容</div>
  <div class="p-4 border-t border-gray-300">第三列第二行内容</div>
  
  <!-- 第三行 -->
  <div class="p-4 border-t border-r border-gray-300">第一列第三行内容</div>
  <div class="p-4 border-t border-r border-gray-300">第二列第三行内容</div>
  <div class="p-4 border-t border-gray-300">第三列第三行内容<br>更多内容<br>来测试高度匹配</div>
</div>

关键说明 #

• grid grid-cols-3：创建3列的Grid布局，Grid默认会让每行的单元格高度自动对齐
• 边框设置：通过border-t（上边框）、border-r（右边框）来实现分隔线，最后一列不需要右边框，第一行不需要上边框
• 无需额外嵌套容器：每个内容块直接作为Grid的子元素，避免列内嵌套容器导致的高度不同步问题

这样调整后，无论哪一行的内容高度增加，该行所有列的高度都会自动匹配，分隔线始终保持笔直。

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