Tailwind grid-rows-2属性为何生成3行？

问题根源 #

grid-rows-2 只是规定了显式网格有2行，但如果你的网格容器里的子元素超过2个，Tailwind会自动生成额外的隐式行来容纳多余元素，这就是为啥你看到3行的原因。

解决办法 #

• 控制子元素数量：把网格内的子元素数量限制在2个以内，这样就只会使用你定义的2行显式网格。
• 隐藏/压缩隐式行（需保留多元素时）：
  要是必须保留所有子元素，不想让额外的行显示，就添加 grid-auto-rows-hidden 或者 grid-auto-rows-0 类，让隐式行高度变为0或者直接隐藏：

  <div class="grid grid-rows-2 grid-auto-rows-hidden">
    <!-- 你的子元素 -->
  </div>
  

• 排查样式冲突：用浏览器开发者工具查看网格容器的grid-template-rows属性，确认有没有其他自定义CSS或者Tailwind类（比如误加的grid-rows-3）覆盖了grid-rows-2的设置。

快速排查技巧 #

打开浏览器开发者工具的Elements面板，查看网格容器的grid-template-rows和grid-auto-rows属性，能快速定位是显式网格还是隐式行导致的行数异常。

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