Fluid width box wrap

This may be more of a CSS question. I have some cards set to stretch with a max and min width within containers set to stretch and wrap. As I make the viewport smaller, I expect the cards to shrink in width before wrapping, but they wrap immediately upon there not being enough space for their max width. Does anyone know why?

File: Dropbox - NF Complete module design MVP 1.zip - Simplify your life

Video: Dropbox - Screen Recording 2022-06-09 at 11.10.25 AM.mov - Simplify your life

I have a website that does it, with smaller tiles but you can probably adapt it:

display: grid
gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
2 Likes

You could also try to set flex-basis: 0; for the cards. By default we use “auto” which is better in most cases, but unfortunately doesn’t work well in your case.