I am currently working on an image gallery in React with Tailwind CSS. Here's a glimpse of how it looks:
https://i.stack.imgur.com/ABdFo.png
Each image component is structured like this:
<div className="flex items-center">
<div className="rounded overflow-hidden shadow-lg">
<img
className="w-full h-48 object-cover"
src={img}
loading="lazy"
alt={""}
/>
<div className="p-6">
<div className="flex items-baseline">
<div className="">{name}</div>
</div>
</div>
</div>
</div>
These are then loaded into the following container:
<div className="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
{images.map(img => <ImageComponent ..../>)}
</div>
The issue I'm facing is that some descriptions make the cards longer than others. How can I ensure that all cards in the same row have equal sizes without cutting off any words?
For this project, I am using
"tailwindcss": "1.4.6"