如何避免添加更多元素时CSS Grid行被撑开？

问题根源在于：右侧文档容器通过row-span-3占据Grid的3行，但Grid的行高会自动适配单元格内最高的内容（也就是右侧容器的高度），导致文档越多，行高被拉得越长，左侧元素所在的行也跟着被撑开。

要保留CSS Grid的row-start/row-end特性解决这个问题，只需让右侧容器在它占据的Grid行范围内滚动，而不是撑大行高：

• 给右侧文档容器添加h-full，让它的高度等于Grid分配给这3行的总高度
• 添加overflow-y-auto，让超出的文档内容在容器内滚动

修改后的完整代码：

<div class="h-screen bg-gray-900 p-4 text-gray-300">
  <!-- Grid -->
  <div class="grid grid-cols-12 gap-4">
    <!-- Right: Documents -->
    <div class="row-start-1 col-start-7 col-span-6 row-span-3 h-full overflow-y-auto space-y-4">
      <div class="p-2 bg-gray-700 rounded">Document #1</div>
      <div class="p-2 bg-gray-700 rounded">Document #2</div>
      <div class="p-2 bg-gray-700 rounded">Document #3</div>
      <div class="p-2 bg-gray-700 rounded">Document #4</div>
      <div class="p-2 bg-gray-700 rounded">Document #5</div>
      <div class="p-2 bg-gray-700 rounded">Document #6</div>
      <div class="p-2 bg-gray-700 rounded">Document #7</div>
      <!-- 可继续添加更多文档，左侧区域不会被撑开 -->
    </div>

    <!-- Left: Category -->
    <div class="col-span-6 row-start-1">
      Category
    </div>

    <!-- Left: Name -->
    <div class="col-span-6 row-start-2">
      Name
    </div>

    <!-- Left: Price -->
    <div class="col-span-6 row-start-3">
      Price
    </div>
  </div>
</div>

额外优化：如果希望左侧行高更稳定，可给Grid容器显式设置行高grid-template-rows: auto auto auto，确保前3行高度由左侧元素自身内容决定，完全不受右侧容器影响。

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