如何使用TailwindCSS实现所有网格项等高且背景铺满单元格

解决方案 #

你遇到的问题根源是网格的直接子元素默认不会自动撑满网格单元格的高度，auto-rows-max 已经生效让整行高度对齐最高内容了，只是子容器没跟着撑开而已，原有Grid的配置不需要做任何修改，按以下两步修改Item标记即可：

1. 给网格的直接子元素（也就是Item的外层容器）添加 h-full 类，让它先撑满整个网格单元格高度
2. 给内部带背景色的div也添加 h-full 类，让背景铺满整个容器高度

修改后的Item标记如下：

<div class="rounded-md overflow-hidden ring-1 ring-blue-600 ring-opacity-20 h-full">
  <div class="bg-red-200 p-6 flex flex-col justify-between h-full">{BODY}</div>
</div>

修改后所有网格项的背景色都会完全铺满单元格，原本设置的上下两端对齐的flex布局效果也不会受到影响，所有项高度完全统一。

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