求助：实现三列卡片中嵌套div及对应模块的等高布局

要实现所有卡片内对应模块（比如绿色标题区）等高，核心是让每个卡片内部的结构成为对齐的网格，确保同一位置的模块自动匹配最高模块的高度。以下是修改后的代码：

修改后的完整代码 #

<div class="container">
  <div class="card">
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>
  </div>
  <div class="card">  
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>
  </div>
  <div class="card">  
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
    <div class="row">Hey this is tariq</div>
  </div>
</div>

<style>
.container {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.card {
  width: 22%;
  /* 去掉固定高度，用Grid对齐内部模块 */
  display: grid;
  grid-template-rows: repeat(4, auto);
  background: radial-gradient(black, transparent);
}
.row{
  border-bottom: 1px solid;
  /* 可选：添加内边距优化显示 */
  padding: 8px;
  box-sizing: border-box;
}
</style>

关键修改点 #

1. 将.card改为Grid布局：通过display: grid和grid-template-rows: repeat(4, auto)定义4行（对应每个卡片里的4个.row），Grid会自动让每一行的高度匹配该列中最高的.row，自然实现对应模块等高。
2. 移除.card的固定高度：固定高度会限制内部模块的自适应，改用Grid后卡片高度会自动匹配最高列的内容，同时flex容器会让所有卡片整体高度一致。
3. 可选优化：给.row添加内边距和盒模型设置，避免内容贴边，提升视觉效果。

替代Flex方案 #

如果偏好Flex布局，可给.card设置display: flex; flex-direction: column;，同时给每个.row添加flex: 1;。但此方案要求所有卡片的.row数量完全一致，否则布局会错乱，Grid方案更稳妥。

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