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

Question

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

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

网格标记：

<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

Answer 1

您应用背景颜色标记为时已晚。只需将 bg-red-200 移动到 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.tailwindcss.com/Lf7nF97Be1

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

TailwindCSS - Set all grid items to be the same height

html

css

css-grid

tailwind-css