Cards in grid not adjusting their heights as wanted - html

Question

I am using Tailwind with React and I have a grid that looks like this currently.
<div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 place-items-center gap-4">
{cards.map((card) => (
<div
className="h-[auto] w-[320px] px-2 pt-2 pb-4 rounded-md border-2 border-gray-200"
key={card.id}
>
<div className="relative rounded-xl overflow-hidden">
<img src={card.image} alt="fund1" />
<div className="absolute top-4 uppercase right-4 leading-tight font-bold w-[70px] h-[70px] flex items-center justify-center bg-white text-black rounded-full text-[11px] text-center">
Discover your match
</div>
</div>
<article className="px-2">
<h2 className="font-bold text-[25px] hover:text-[#6D9886] transition-colors cursor-pointer my-4">
{card.topic}
</h2>
<p className="font-light text-[14px]">{card.text}</p>
<button className="block mx-auto text-[#6D9886] mt-6">
Read more
</button>
</article>
</div>
))}
</div>
Now, The height of the cards is not balanced from top as I want it straight. Also from bottom of the cards, I want the other cards to adjust as soon as one's height ends.
Here is what I want to achieve:
I have tried setting differed columns and rows properties from grid but no luck.

Answer 1

If you are using Bootstrap you will get
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>enter code here
</div>
or if you are using simple css just give a class and give that class to every part