How to make 3 row in 1 row on tailwind - tailwind-css

Question

I want to divide the card into 3 with tailwind css.
how can ı make ?
<Card
className="grid grid-rows-2"
>
<h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
<p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
<div className="flex items-center justify-between mb-2 row-span-1">
<span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
</div>
</Card>

Answer 1

If you need three equally-sized columns, you can use grid with columns:
<Card className="grid grid-cols-3">
<h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
<p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
<div className="flex items-center justify-between mb-2 row-span-1">
<span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
</div>
</Card>
However, if you want to divide it in three equally-sized rows, you can use grid with rows:
<Card className="grid grid-rows-3">
<h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
<p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
<div className="flex items-center justify-between mb-2 row-span-1">
<span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
</div>
</Card>
The number in grid-cols-{num} and grid-rows-{num} is the number of columns or rows, as in grid-template-rows: repeat({num}, minmax(0, 1fr));. You can see the allowed values here.
If you need each part to conform to the size of the content, you're better off with flexbox instead.

Answer 2

You can create a row of 3 Cards by encapsulating a div with class grid grid-cols-3 gap-4. gap-4 will gives some spacing between them.
You can view your corrected code here
Below is the code also
<div className="p-3 grid grid-cols-3 gap-3">
<Card className="bg-slate-300">
<h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
<p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
<div className="flex items-center justify-between mb-2 row-span-1">
<span className="font-bold text-gray-900"><Price priceWithTax="{priceWithTax}" currencyCode="{currencyCode}" /></span>
</div>
</Card>
<Card className="bg-slate-300">
<h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
<p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
<div className="flex items-center justify-between mb-2 row-span-1">
<span className="font-bold text-gray-900"><Price priceWithTax="{priceWithTax}" currencyCode="{currencyCode}" /></span>
</div>
</Card>
<Card className="bg-slate-300">
<h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
<p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
<div className="flex items-center justify-between mb-2 row-span-1">
<span className="font-bold text-gray-900"><Price priceWithTax="{priceWithTax}" currencyCode="{currencyCode}" /></span>
</div>
</Card>
</div>
Some resources here