如何用Tailwind CSS Grid实现与Flex一致的全屏布局效果？

我用Flex实现了如下布局：

<div class="min-h-screen flex flex-col">
    <div class="bg-gray-400 h-12 flex-shrink-0 header">Header</div>
    <div class="bg-gray-300 flex-grow content">Content</div>
    <div class="bg-gray-400 h-12 flex-shrink-0 footer">Footer</div>
</div>

想要用Grid布局实现同样效果，尝试的代码却没达到预期：

<div class="min-h-screen grid grid-rows-3">
  <div class="bg-gray-400 h-12 header">Header</div>
  <div class="bg-gray-300 content">Content</div>
  <div class="bg-gray-400 h-12 footer">Footer</div>
</div>

预期效果：Header和Footer固定为h-12的高度，Content区域自动填充屏幕剩余空间，整体容器占满屏幕最小高度。

问题原因 #

grid-rows-3会把容器高度平均分成3等份，即便给Header和Footer设置了h-12，Grid的行高优先级更高，导致这两个元素被拉伸，Content也只占1/3高度，无法匹配Flex布局的自适应效果。

修正后的Grid代码 #

<div class="min-h-screen grid grid-rows-[auto_1fr_auto]">
  <div class="bg-gray-400 h-12 header">Header</div>
  <div class="bg-gray-300 content">Content</div>
  <div class="bg-gray-400 h-12 footer">Footer</div>
</div>

代码说明 #

• grid-rows-[auto_1fr_auto]直接定义行高规则：
  • 第一行（Header）：auto，高度由自身设置的h-12决定
  • 第二行（Content）：1fr，占据容器剩余的全部可用空间
  • 第三行（Footer）：auto，同样由h-12固定高度
• min-h-screen确保容器至少占满屏幕高度，当Content内容过多时，容器会自动延伸高度。

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