我有一个相当简单的12列的css网格.我正在使用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>