在NextJS中使用Tailwind Grid实现网格高度自适应父元素的问题

我在NextJS中使用Tailwind构建网格系统时，遇到了网格无法自动适配父元素高度的问题，具体需求如下：

• 原型线框图：红色为Wrapper，粉色为Layout，紫色为Grids，明确了容器与网格的层级结构
• 当前实现问题：右侧盒子无法适配窗口高度，需要让它自动填充父元素的高度

原问题代码示例 #

export default function GridLayout() {
  return (
    <div className="w-screen h-screen">
      <div className="p-4">
        <div className="grid grid-cols-3 gap-4">
          <div className="bg-blue-200 p-4">左侧内容区块</div>
          <div className="bg-green-200 p-4">中间内容区块</div>
          <div className="bg-yellow-200">右侧内容区块（无法适配高度）</div>
        </div>
      </div>
    </div>
  )
}

解决过程 #

在MagnusEffect的帮助下，通过调整内边距、为网格及子元素添加高度相关Tailwind类等细节修改，完美解决了高度适配问题。

修改后的代码示例 #

export default function GridLayout() {
  return (
    <div className="w-screen h-screen">
      <div className="h-full p-4">
        <div className="grid grid-cols-3 gap-4 h-full">
          <div className="bg-blue-200 p-4">左侧内容区块</div>
          <div className="bg-green-200 p-4">中间内容区块</div>
          <div className="bg-yellow-200 p-4 h-full">右侧内容区块（已适配父元素高度）</div>
        </div>
      </div>
    </div>
  )
}

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