TailwindCSS - 将所有网格项设置为相同的高度

Question

我想使用 Tailwind CSS 创建网格，其中所有项目都具有相同的高度。

但是当孩子的内容长度不同时，他们的背景颜色不会填满整个单元格：

---

网格标记：

<div class="grid grid-cols-2 gap-4 auto-rows-max">{ITEMS}</div>

物品标记：

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

我认为auto-rows-max是解决方案，但它不起作用。

互动示例： https : //play.tai​​lwindcss.com/dlgGmz41dA

Answer 1

您将背景颜色应用到一个标签为时已晚。 只需将bg-red-200移动到带有rounded-md overflow-hidden...的 div rounded-md overflow-hidden...并且每个网格单元格都将具有全彩色背景，无论内容长度如何。

物品标记：

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

在 Tailwind Play https://play.tai​​lwindcss.com/Lf7nF97Be1