Tailwind CSS Grid设置grid-rows-1却显示2行的问题求助

问题重现 #

使用Tailwind构建的网格布局，原本正常运行，现在出现显示2行的问题，但已明确给父容器设置了grid-rows-1。相关代码如下：

<div className="grid lg:grid-cols-2 grid-cols-1 grid-rows-1 gap-2 h-full w-full lg:py-10 py-5">
   <div className="flex flex-col lg:justify-end md:justify-center justify-start h-full">
   // 内部代码
   </div>
   <div className="grid-rows-4 grid-cols-1 hidden lg:grid">
   // 内部代码
   </div>
</div>

布局异常效果：

补充清晰版本：

问题排查与修复 #

核心原因 #

1. 响应式断点未触发：父容器设置了lg:grid-cols-2，默认lg断点为1024px。如果当前屏幕宽度未达到该值，父容器会使用grid-cols-1，两个子元素自然垂直排列成两行，这是正常的响应式表现。
2. 父容器高度约束失效：父容器的h-full依赖于父级元素的高度设置，如果父级没有明确高度，h-full无法生效，父容器会被内容撑开，导致网格行被拉伸，视觉上像是两行。
3. 子元素高度未对齐：第二个子元素未设置h-full，在大屏下作为网格项时，高度未占满父网格行，可能导致布局错位。

修复方案 #

• 针对大屏下的异常：
  确保第二个子元素占满网格项高度，添加h-full类，同时确认父级元素有明确的高度支撑（比如给父级也设置h-full或固定高度）：

  <div className="grid lg:grid-cols-2 grid-cols-1 grid-rows-1 gap-2 h-full w-full lg:py-10 py-5">
     <div className="flex flex-col lg:justify-end md:justify-center justify-start h-full">
     // 内部代码
     </div>
     <div className="grid-rows-4 grid-cols-1 hidden lg:grid h-full">
     // 内部代码
     </div>
  </div>
  

• 强制所有断点保持1行（若需求如此）：
  如果你希望小屏也显示1行（需要横向滚动），可以把grid-cols-1改为grid-cols-2，并添加overflow-x-auto：

  <div className="grid grid-cols-2 lg:grid-cols-2 grid-rows-1 gap-2 h-full w-full lg:py-10 py-5 overflow-x-auto">
     <!-- 子元素代码不变 -->
  </div>
  

• 验证断点生效：
  调整屏幕宽度到1024px以上，检查lg:grid-cols-2是否正确触发，两个子元素是否并列显示为两列。

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