如何用Tailwind实现网格行垂直空间一致（含子元素场景）

核心方案 #

要让所有网格单元格高度一致，关键是让G1-G4这类子元素脱离父元素的文档流，这样父单元格的高度就不会被子元素撑开，和其他单元格保持相同高度。

方法1：绝对定位（推荐，支持子元素交互） #

给首个网格单元格加相对定位，把G1-G4的容器设为绝对定位，固定在父单元格的某个位置（比如顶部），完全不占用父元素的垂直空间。

示例代码：

<!-- 7列网格容器 -->
<div class="grid grid-cols-7 gap-2">
  <!-- 首个带子元素的网格单元格 -->
  <div class="relative h-full">
    <!-- G1-G4子容器：绝对定位脱离文档流 -->
    <div class="absolute top-0 left-0 right-0 bg-gray-100 text-sm">
      <div class="p-1">G1</div>
      <div class="p-1">G2</div>
      <div class="p-1">G3</div>
      <div class="p-1">G4</div>
    </div>
  </div>
  <!-- 其他普通网格单元格 -->
  <div class="h-full bg-gray-100"></div>
  <div class="h-full bg-gray-100"></div>
  <div class="h-full bg-gray-100"></div>
  <div class="h-full bg-gray-100"></div>
  <div class="h-full bg-gray-100"></div>
  <div class="h-full bg-gray-100"></div>
</div>

关键类说明：

• relative：给父单元格设置定位参考，让绝对定位的子元素能基于它定位
• absolute top-0 left-0 right-0：让子容器占满父单元格宽度，固定在顶部，不影响父元素高度计算
• h-full：强制所有单元格继承网格行的高度，保证高度统一

方法2：Transform偏移（适合无交互需求的场景） #

如果G1-G4不需要用户点击或交互，可以用位移把它们移出父单元格的可视范围，同样不会撑开父元素高度。

示例代码：

<div class="grid grid-cols-7 gap-2">
  <div class="h-full overflow-hidden">
    <div class="transform -translate-y-full bg-gray-100 text-sm">
      <div class="p-1">G1</div>
      <div class="p-1">G2</div>
      <div class="p-1">G3</div>
      <div class="p-1">G4</div>
    </div>
  </div>
  <!-- 其他普通单元格 -->
  <div class="h-full bg-gray-100"></div>
  <!-- ...剩余单元格 -->
</div>

关键类说明：

• overflow-hidden：隐藏超出父单元格的子元素
• transform -translate-y-full：把容器向上移动自身高度，完全移出父单元格，不影响父元素高度

响应式适配 #

直接通过Tailwind的响应式前缀调整网格列数即可，比如在小屏幕下改为单列：

<div class="grid grid-cols-1 sm:grid-cols-7 gap-2">
  <!-- 单元格内容 -->
</div>

这样在手机端会自动切换为单列布局，子元素的定位/位移效果依然生效，保持整体布局一致性。

内容的提问来源于stack exchange，提问作者Javi Quirós