如何用Tailwind CSS实现网格布局下卡片内容的对齐？

架构老林

2026-6-25

解决方案

要实现卡片标题等高、按钮底部对齐，调整你的Tailwind布局结构即可，具体修改如下：

关键修改点

将卡片内容容器（.p-4...的div）设置为 flex flex-col，让内部元素能垂直分配空间
给标题添加 flex-shrink-0，确保固定高度不被内容挤压（你已用h-16，这个属性能维持标题高度稳定）
描述文本保留 grow 填充标题和按钮间的剩余空间，可额外加 overflow-auto 避免内容溢出卡片
按钮用 mt-auto 代替 mt-4，强制将其推到容器底部

修改后的完整代码

@foreach ($eventos as $evento)
    <article class="flex flex-col">

      <!-- Cover image -->
      <div
        class="flex items-end justify-end w-full h-48 bg-top bg-cover rounded-t-lg"
        style="background-image: url('{{ $evento->avatar }}');"
        >
        <x-gui.badge
          color="info"
          size="xs"
          >
          {{ $evento->tipo_juego }}
        </x-gui.badge>
      </div>

      <!-- Content -->
      <div class="p-4 bg-gray-200 text-dark rounded-b-xl flex flex-col">
        <h5 class="h-16 mb-2 text-2xl font-bold tracking-tight text-dark dark:text-light flex-shrink-0">{{ $evento->nombre }}</h5>

        <p class="grow overflow-auto">{{ $evento->descripcion }}</p>

        <x-gui.button
          color="info"
          size="xs"
          class="mt-auto"
          >
          {{ $evento->tipo_juego }}
        </x-gui.button>
      </div>
    </article>
@endforeach