1

I have a grid of cards for service requests. I have not been able to get all cards to simply have the same height. It works fine for the row the largest item is at but the next row height is smaller. How do I have them all the same height?

Code:

https://play.tailwindcss.com/ACR2zkFOeb

spacerobot
  • 265
  • 1
  • 5
  • 23

2 Answers2

1

Switch auto-rows-max with auto-rows-fr. You can read more about the fr unit here. Here's a StackOverflow answer about a similar scenario with a comprehensive explanation of why it works: link. auto-rows-fr is the same as grid-auto-rows: 1fr as you can see in the documentation.

Tailwind-play with a working example.

ChenBr
  • 1,671
  • 1
  • 7
  • 21
0

Have you tried this?

<div class="grid grid-cols-3 gap-4">
  <div class="h-96"></div>
  <div class="h-96"></div>
  <div class="h-96"></div>
</div>
ＭＯＮＴＡＳＩＭ
  • 147
  • 4
  • 1
    This code isn't responsive, I wouldn't recommend setting static heights. For example, what will happen when the text overflows `h-96`? – ChenBr Oct 27 '22 at 13:53
  • 1
    Can use overflow-auto class if text overflows. But, you are right, it is not a good practice to use fixed height without necessity. – ＭＯＮＴＡＳＩＭ Oct 27 '22 at 13:56