顺风 CSS 中相同高度的卡片

Question

我正在使用顺风CSS。卡片中的数据不一致。例如，有些卡的描述很短，而另一些卡的描述很长。有些卡片包含 1-2 个标签，而其他卡片则包含 5-6 个。我想让所有的卡片都具有相同的高度。有什么办法可以做到这一点吗？

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-6">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full sm:w-1/2 md:w-1/2 xl:w-1/4 p-4">
      <div class="block bg-white overflow-hidden border-2">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您使用了弹性盒，因此根据您的代码，您需要在弹性容器上仅使用 items-stretch 来

algin items

。但这些卡片上也有包装纸，所以每张卡片上都需要

h-full

。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<div class="container mx-auto p-6">
  <div class="flex items-stretch -mx-4">
    <div class="flex-1 p-4">
      <div class="block bg-white overflow-hidden border-2 h-full">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
    
    <div class="flex-1 p-4">
      <div class="block bg-white overflow-hidden border-2 h-full">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim lectus.</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

我删除了所有响应式宽度和换行以使其在此处的预览下工作。

网格

上面使用弹性盒的解决方案可以工作，但对于您的情况（卡片），您确实想使用grid。它将解决您的所有问题并使代码更短。

Flex 将有助于卡片内容。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-6 grid grid-cols-2 gap-4">
  <div class="col-span-1 flex flex-col bg-white border-2 p-4">
    <h2 class="mb-2 font-bold text-2xl">
      Card Name
    </h2>
    <div class="mb-4 flex flex-wrap">
        <span class="mr-2">Link 1</span>
        <span class="mr-2">Link 2</span>
    </div>
    <p class="text-md text-justify">Some Description</p>
    <div class="flex flex-wrap mt-auto pt-3 text-xs">
      <p class="mr-2 mb-2">Tag #1</p>
      <p class="mr-2 mb-2">Tag #2</p>
    </div>
  </div>
  <div class="col-span-1 flex flex-col bg-white border-2 p-4">
    <h2 class="mb-2 font-bold text-2xl">
      Card Name
    </h2>
    <div class="mb-4 flex flex-wrap">
        <span class="mr-2">Link 1</span>
        <span class="mr-2">Link 2</span>
    </div>
    <p class="text-md text-justify">Some Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim lectus.</p>
    <div class="flex flex-wrap mt-auto pt-3 text-xs">
      <p class="mr-2 mb-2">Tag #1</p>
      <p class="mr-2 mb-2">Tag #2</p>
    </div>
  </div>
</div>

现在只需根据您的需求添加响应式

grid-cols-xxx

或

col-span-xxx

。

Answer 2

在我看来，最好的解决方案是使用

grid

和

auto-rows-fr

。

所以，你会：

<div class="grid auto-rows-fr grid-cols-3 gap-2">
<!-------------- ^^^^^^^^^^^^ this part is important -->

  <div class="rounded bg-slate-100 p-3">This has some content.</div>
  <div class="rounded bg-slate-100 p-3">
    This has more content so that its significantly larger than the other
    items. Yet all items, even the one in the new line will grow to the
    size of the highest container.
  </div>
  <div class="rounded bg-slate-100 p-3">More content.</div>
  <div class="rounded bg-slate-100 p-3">First item in new line.</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>