如何解决Tailwind Grid中04区块无法占满10行空间的问题？

问题核心在于网格容器的行高配置：你使用的grid-rows-12仅创建了12个网格行，但这些行的高度默认由内部内容决定，不会自动拉伸以填满容器的可用高度——这就导致row-span-10只是跨了10个行，但行本身高度不足，视觉上没占满空间。

解决方案 #

给网格容器替换行高规则，用grid-rows-[repeat(12,minmax(0,1fr))]替代grid-rows-12，让每一行均分容器的可用高度：

<div class="grid grid-cols-12 grid-rows-[repeat(12,minmax(0,1fr))] gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>

原理说明 #

• repeat(12, minmax(0, 1fr))会生成12个网格行，每个行的高度用fr单位分配容器剩余空间，确保所有行的高度总和填满容器。
• 若需要固定行高，也可以替换为具体数值（比如grid-rows-[repeat(12,40px)]），但fr单位更适配响应式Bento布局，能自适应容器高度变化。

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