How can i align my components vertically and 3 in a row? - html

Question

On my react project i want align my components to vertical. But when i use div and make it flex , my component width is changing and looking bad. what should i do ? I using tailwindcss but if you dont know it you can tell normal css too. I can use normal css too. My component :
<div className="">
<div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
<div className="flex mt-2">
<div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2 ">
<FontAwesomeIcon icon={faEtsy} className="text-2xl text-red-600" />
</div>
<div className="relative">
<span className="ml-3 pt-2 relative text-xl font-medium">
{prop.PharmacyName}
</span>
<br />
<span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
</div>
</div>
<Divider />
<div className="">
<p className="px-2 py-1 font-medium text-base text-gray-700">
{prop.PharmacyAdress}
</p>
</div>
</div>
</div>
How i calling my component :
data.map((x, index) => {
return (
<div className="flex align-center">
<PharmacyCard className="relative" key={index} props={x} />
</div> )})
How its looks like : https://prnt.sc/1covi9m
How i want : https://prnt.sc/1cow1sq
I using that component like 30-40 times with mapping. So i want to see like 3 component in a row. Thanks for all replies!

Answer 1

So i want to see like 3 component in a row.
Since you have clear idea about the layout, I suggest to wrap you components in another div with grid and three columns; something like this:
<div className="grid grid-cols-3">
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>
Depending on your design, you may add gap class as well.
Also consider removing w-3/12 class from components so they fill grid's width.

Answer 2

You just need to put the .flex in upper level like the below:
<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>
hope this link will assist you to get the flexbox better
https://codepen.io/enxaneta/full/adLPwv