如何使用Tailwind CSS将卡片布局划分为3行？

你当前代码里，父容器Card设置了grid-rows-2（仅划分2行），但子元素的row-span数值（3、4、1）远超总行数，会导致布局异常。要改成3行布局，按以下步骤调整：

• 第一步：把父容器的grid-rows-2替换为grid-rows-3，明确将卡片划分为3行。
• 第二步：调整每个子元素的row-span值，确保跨度总和不超过3，以下是两种常见方案：

方案1：三个元素各占1行 #

适合内容长度均衡的场景，每个元素分别占据一行：

<Card
  className="grid grid-rows-3"
>
  <h5 className="font-bold tracking-tight text-gray-900 row-span-1">{productName}</h5>
  <p className="text-gray-900 text-sm row-span-1">{shortDesc}</p>
  <div className="flex items-center justify-between mb-2 row-span-1">
    <span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
  </div>
</Card>

方案2：标题占2行，其余元素各占1行 #

如果标题内容较长需要更多空间，可让标题占据2行：

<Card
  className="grid grid-rows-3"
>
  <h5 className="font-bold tracking-tight text-gray-900 row-span-2">{productName}</h5>
  <p className="text-gray-900 text-sm row-span-1">{shortDesc}</p>
  <div className="flex items-center justify-between mb-2 row-span-1">
    <span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
  </div>
</Card>

如果需要自定义行高（比如让描述行自动拉伸填充剩余空间），可以用自定义网格行配置：

<Card
  className="grid grid-rows-[auto_1fr_auto]"
>
  <h5 className="font-bold tracking-tight text-gray-900">{productName}</h5>
  <p className="text-gray-900 text-sm">{shortDesc}</p>
  <div className="flex items-center justify-between mb-2">
    <span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
  </div>
</Card>

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