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

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!

https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row — RST, Jul 18 '21 at 16:26

score 1 · Answer 1 · answered Jul 18 '21 at 15:25

1

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

answered Jul 18 '21 at 15:25

Mhd Wael Jazmati

636
9
18

Thanks for reply brother its works its make vertically align but Its not making like 3 in row then go bottom then put 3 more then go bottom... like that. its make like whole datas in a row. (like 30-40 component in a row. i want 3 in a row only. ) – Uğurcan Uçar Jul 18 '21 at 15:57

score 1 · Accepted Answer · answered Jul 19 '21 at 07:53

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.

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

2 Answers2