解决Grid布局移动端Div挤压问题：实现等高与溢出滚动

核心问题原因 #

问题出在Grid默认会根据单元格内容自动调整行高，导致内容较多的上方单元格挤压下方单元格。要解决这个问题，必须强制两行平分可用高度，同时让内容在单元格内滚动而非撑开容器。

具体实现（Tailwind CSS） #

1. 给Grid容器设置高度与行分配
   先给Grid容器确定高度（比如占满视口或父容器），然后强制两行平分可用空间：

<div class="grid grid-rows-2 h-screen">
  <!-- 第一个单元格 -->
  <div class="min-h-0">
    <div class="h-full overflow-y-auto">
      <!-- 你的内容，溢出时自动滚动 -->
    </div>
  </div>
  <!-- 第二个单元格 -->
  <div class="min-h-0">
    <div class="h-full overflow-y-auto">
      <!-- 你的内容 -->
    </div>
  </div>
</div>

• grid-rows-2等价于grid-template-rows: repeat(2, 1fr)，强制两行平分Grid容器的可用高度
• min-h-0是关键：Grid单元格默认带有min-height: min-content属性，会优先适配内容高度，这个类会覆盖该默认行为，让单元格严格遵守1fr的高度分配规则
• h-full overflow-y-auto让内容容器占满单元格高度，当内容超出时自动显示垂直滚动条，不会撑开父元素

2. 适配嵌套容器场景
   如果Grid不是全屏使用，而是嵌套在其他容器内，只需将h-screen替换为h-full，同时确保父容器有明确的高度约束：

<div class="h-[500px]"> <!-- 父容器设置固定高度 -->
  <div class="grid grid-rows-2 h-full">
    <!-- 单元格内容写法同上 -->
  </div>
</div>

效果验证 #

设置完成后，两个Grid单元格会始终保持相同高度，无论各自内容多少；内容超出时会在单元格内部滚动，不会出现互相挤压的情况。

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