如何使用 Tailwindcss 使用网格布局对齐多个卡片内容？

Question

我正在尝试使用 Tailwindcss 对齐网格内卡片内的一些元素，我尝试遵循这个答案，这几乎就是我想要的

对齐 CSS 网格布局卡上的元素

这个答案是针对纯 CSS 的，所以我想我一定在 Tailwind 中做错了什么，因为我无法复制它。我也在使用 Laravel，忘记这里的循环，它是为了不一遍又一遍地重复网格内的 div。我还放弃了很多与问题无关的课程。

  @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 grow">
        <h5 class="h-16 mb-2 text-2xl font-bold tracking-tight text-dark dark:text-light">{{ $evento->nombre }}</h5>

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

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

我想对齐底部的按钮。如果可能的话，我还希望所有卡片标题的高度相同

Answer 1

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

有类

grow

，但父类不是

flex

，所以它不起作用。

尝试将类

flex flex-col

添加到

<div class="p-4 bg-gray-200 text-dark rounded-b-xl grow">