防止 CSS 网格行随着添加更多项目而扩展

Question

我有一个相当简单的 CSS 网格，有 12 列。我正在使用 CSS 网格的行开始和行结束功能将我的项目准确放置在我想要的位置。但我遇到了一个问题，即我在右侧添加的项目越多，左侧就会不断扩大和增长。

例如，如果仅添加 3 个文档，则如下所示：

但是有了 7 个文档，我的左侧现在疯狂地扩展，而不是像应有的那样停留在顶部：

理想情况下，我希望无论我在右侧添加多少项目，我的左侧都不会移动或扩展：

我知道我可以使用 Flexbox 轻松完成此任务，但我真的想使用 CSS 网格和行开始、行结束功能来实现此目的。

这是我现在的代码（https://play.tailwindcss.com/fy2kFCCb9T）：

<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 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>

Answer 1

您可以考虑声明显式网格行轨道。这意味着您将能够调整左侧项目出现的行的大小，以便它们不会由于自动网格行大小调整而分散。

之前：

┏━━━━━━━━━━━━━━━━━━━━━┓
┃                     ┃
┃ grid-auto-row: auto ┃
┃                     ┃
┠─────────────────────┨
┃                     ┃
┃ grid-auto-row: auto ┃
┃                     ┃
┠─────────────────────┨
┃                     ┃
┃ grid-auto-row: auto ┃
┃                     ┃
┗━━━━━━━━━━━━━━━━━━━━━┛

之后：

┏━━━━━━━━━━━━━━━━━━━━━┓
┃ `min-content`       ┃
┠─────────────────────┨
┃ `min-content`       ┃
┠─────────────────────┨
┃ `min-content`       ┃
┠─────────────────────┨
┃ `1fr`               ┃
┃                     ┃
┃                     ┃
┃                     ┃
┃                     ┃
┗━━━━━━━━━━━━━━━━━━━━━┛

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="h-screen bg-gray-900 p-4 text-gray-300">
  <!-- Grid -->
  <div class="grid grid-cols-12 gap-4 grid-rows-[repeat(3,min-content)_1fr]">
    <!-- Right: Documents -->
    <div class="row-start-1 col-start-7 col-span-6 row-span-4 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>

或者，您可以将左侧元素包装在容器中，以便它们根本不在任何网格行中。这意味着它们将被布局为块元素，从而从顶部堆叠：

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<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 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>

    <div class="col-span-6 space-y-4">
      <!-- Left: Category -->
      <div>
        Category
      </div>

      <!-- Left: Name -->
      <div>
        Name
      </div>

      <!-- Left: Price -->
      <div>
        Price
      </div>
    </div>
  </div>
</div>