How to make 2 row have same column number with flex?

[IRediTOTO]

Hi, I have a list of 20 tag in a flex div like this

 <div className="tw-flex tw-items-center  tw-flex-row tw-flex-wrap tw-gap-2">
    <img className="tw-h-10 tw-w-10 tw-rounded-full" src="src" />
.... 19 more image tag here
</div>

It will show like this

I want it 10 in first line and 10 below. Is there a good way todo that ? But the number of img tag is not static, it can be 2 or 30 images so I cant use grid.

[simonswiss]

Hey,

You cannot tell flex to split items equally in two parts, unfortunately. You'll only be able to set a container width, and then let the elements wrap to the next line when the space is used.

However, you can achieve that result if you decide to let the items from from top to bottom. Kinda feels hacky, but you could set the container height to something that fits 2 images vertically (tw-h-32), and then set the flex direction to flex-col, let it wrap with flex-wrap.

Here's a quick hacky little example of it: https://play.tailwindcss.com/mpTZupvlyK

If you don't like that, your best bet here would be at the component level (I assume you use React since I see the classNames attribute), split your images array in 2 equal parts, and wrap each inside a <div>, if that makes sense.

That said, you could also use the images.length to define a number of grid columns to apply dynamically to your wrapper.

[IRediTOTO]

Thank you for your answer. Yes so need use JS to get that. Its ok, just want learn alitte trick here :)