Tailwind下HTML Grid主内容如何随动态侧边栏高度跨行？

我有如下网格布局：侧边菜单（元素5、6、7、8）为动态内容，可扩展为任意数量的项。我希望主内容（元素9）能根据侧边栏的高度自动跨行。我使用Tailwind CSS，当给元素9添加row-span-full类时，它会覆盖顶部标签（元素2、3、4），即便已设置row-start-2属性。以下是我的代码：

<div class="grid grid-cols-5 auto-rows-auto gap-4">
    <div class="col-start-2">2</div>
    <div class="col-start-3">3</div>
    <div class="col-start-4">4</div>
    <div class="row-start-2">5</div>
    <div class="col-start-1 row-start-3">6</div>
    <div class="col-start-1 row-start-4">7</div>
    <div class="col-start-1 row-start-5">8</div>
    <div class="col-span-4 col-start-2 row-start-2 [missing class to take up the rest of the row]">9</div>
</div>

请问该需求在HTML Grid中是否可实现？因为用Flexbox很容易做到这一点。

这个需求在HTML Grid里完全可以实现，核心是不要手动指定侧边栏元素的row-start，让Grid自动计算行分布，同时给主内容元素设置正确的行范围即可。

调整后的代码（Tailwind CSS） #

<div class="grid grid-cols-5 auto-rows-auto gap-4">
    <!-- 顶部标签行 -->
    <div class="col-start-2">2</div>
    <div class="col-start-3">3</div>
    <div class="col-start-4">4</div>
    
    <!-- 侧边栏：统一放在第1列，从第2行开始，Grid自动排列后续行 -->
    <div class="col-start-1 row-start-2">5</div>
    <div class="col-start-1">6</div>
    <div class="col-start-1">7</div>
    <div class="col-start-1">8</div>
    
    <!-- 主内容：从第2行开始，跨到网格最后一行 -->
    <div class="col-span-4 col-start-2 row-start-2 row-end -1">9</div>
</div>

关键说明 #

• 删掉侧边栏元素多余的row-start-3/row-start-4等属性，让Grid自动为它们分配行位置，侧边栏的总高度会由动态内容自动撑开。
• 给主内容元素添加row-end -1（Tailwind原生支持该语法），表示让它的行结束位置对齐网格的最后一行，这样就能自动填满侧边栏下方的所有行空间，不会覆盖顶部标签。
• row-span-full之所以会覆盖顶部，是因为它会让元素从第一行开始跨到最后一行，而你需要的是从第2行开始，所以row-start-2 + row-end -1才是正确的组合。

动态内容适配 #

当侧边栏添加更多元素时，Grid会自动增加行数量，主内容元素的row-end -1会自动跟进，始终填满从第2行到最后一行的空间，完美适配动态高度。

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