<ul className="flex flex-wrap justify-between w-full">
{pic.map((pic, index) => (
<li key={index}>
{" "}
<div className="avatar p-2 cursor-pointer">
<div className="w-[100px] h-[100px] rounded-full bg-orange-50">
<img
src={pic.picture!}
alt=""
style={{ maxWidth: "100%", maxHeight: "100%" }}
/>
</div>
</div>
</li>
))}
</ul>
I have this one. I am trying to fit every item to one row without scrolling. if it is 10 then make it smaller than when it is 5 to fit every items to the screen width to display everything.
I could not make it work. The items keep going off the screen and making it scroll without shrinking the size to fit into one.