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

Posted 2023-03-07

【中文标题】TailwindCSS - 将所有网格项目设置为相同的高度

【英文标题】：TailwindCSS - Set all grid items to be the same height

【发布时间】：2021-12-19 04:42:07

【问题描述】：

我想使用 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.tailwindcss.com/dlgGmz41dA

【参考方案1】：

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

项目标记：

<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.tailwindcss.com/Lf7nF97Be1