如何消除Tailwind CSS响应式Grid布局产生的多余网格单元格？

我来帮你梳理问题根源，以及对应的修复方案：

问题出在哪？ #

你当前的代码在小屏（sm/xs）设置了grid-rows-2，让两个元素垂直排成两行；但切换到大屏（md/lg）时，虽然设置了grid-cols-2让元素横向排成两列，但小屏的grid-rows-2没有被覆盖——网格容器仍然保留了两行的轨道。这就导致大屏下两个元素只占用了第一行的两个单元格，第二行的空轨道直接变成了多余的空白区域。

另外，你给第二个子元素加的auto-cols-fr类是无效的：这个属性是用来控制网格容器的自动列大小的，放在网格项上不会起任何作用，建议直接移除。

修复后的完整代码 #

<section id="hero" class="pt-12 pb-12 bg-yellow-400">
  <div class="container grid items-center max-w-6xl px-2 py-2 mx-auto bg-yellow-100 md:grid-cols-2 sm:grid-rows-2">
    <div>
      <img src="./img/port-vector.png" class="scale-50" alt="logo">
    </div>
    <div class="text-center sm:pt-24 sm:pb-24">
      <h1 class="text-4xl">GABRIEL STEVEN</h1>
      <h3 class="text-2xl">Front-End Web Dev, Designer</h3>
    </div>
  </div>
</section>

关键调整说明 #

1. 利用移动优先特性简化设置：Tailwind是移动端优先的框架，我们只在小屏（sm及以下）显式设置grid-rows-2，大屏（md及以上）只设置grid-cols-2、不指定行轨道——这样大屏时网格会自动使用默认的单行布局，不会保留小屏的两行轨道，自然就消除了多余空白。
2. 清理无效代码：删掉子元素上的auto-cols-fr，避免冗余。
3. 减少重复断点：sm:grid-rows-2已经覆盖了xs及以上到md以下的屏幕范围，不需要重复写xs:grid-rows-2（如果要兼容极小屏幕，也可以保留，但通常sm已经足够）。

如果调整后还有视觉上的空白，检查一下图片缩放是否导致网格项高度不一致，可以尝试给图片容器加flex justify-center来居中图片，或者微调items-center的对齐方式。

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