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