I have 6 or 7 items with defined width. Container width is flexible, it can be changed depending on user viewport. I am using
display: flex;
justify-content: center;
flex-wrap: wrap;
to put the items which will not fit the container onto the next row and center them. For the most part it is fine, but if container is wide enough it looks ugly with 5-1 or 4-2 items distribution on 2 rows. I am also fine with all elements on one row.
Can I set wrapping on 2 rows to split amount of items between them instead using only CSS? 3-3; or 4-3 if i add another one.
I am currently using some kind of crutch by applying media query to shrink the container on certain resolution breakpoints to fit only certain amount of items per row. Is there more elegant solution?
