Tailwind CSS：预设列数的Grid无法占满子元素空间如何解决

问题原因 #

你当前的代码里，<main>是垂直方向的Flex容器，内部的Grid容器设置了h-full，但Flex垂直布局的子元素默认不会自动拉伸占据父容器的剩余空间——h-full仅能继承父元素已有的高度，而<main>自身高度默认由内容决定，导致Grid容器无法撑满空间。

解决方案 #

给Grid容器添加flex-1类，让它在Flex垂直布局中占据父容器的剩余空间：

<main class="flex flex-col min-h-screen"> <!-- 可选：给main加min-h-screen确保占满视口高度 -->
  <div class="flex-1 grid h-full w-full items-center justify-center gap-8 bg-red-500 grid-cols-2 p-5">
    <div class="flex h-full w-full flex-col items-center justify-center gap-6 bg-blue-500"></div>
  </div>
</main>

补充说明 #

如果希望<main>本身占满浏览器视口高度，可以给它加上min-h-screen类，这样Grid容器的flex-1就能基于整个视口高度来拉伸，完全复刻Flexbox子元素占满空间的行为。

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