Cards of same height in tailwind CSS

user_15774237 0
Viewed 12273

I am using tailwind css. The data in cards is inconsistent. For example some card have short description while other cards have long. Some card contains 1-2 tags while others contains 5-6. I want to make all the cards of same height. Is there any way to do this?

<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>

tailwind-css css
1 Answers

You used flex boxes, so based on your code you need to algin items by using just items-stretch on flex container. But you also have wrapper on those cards, so also h-full well be needed on every card.

<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>

I removed all responsive widths and wrapping to make it work under preview here.

Grid

Solution above with flexboxes will work, but for your case (cards) you really want to use grid. It will solve all your problems and make code shorter.

Flex will be helpfully inside card content.

<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>

Now just add responsive grid-cols-xxx or col-span-xxx based on your needs.

user_105857730
Related