We’re working on a cruise website and on our destinations pages, we’ve got a section for cruises going to that destination. I’ve set this up with a CMS list with 4 items at 32% width, flexed to justify space between.
It looks great on the top line but on the bottom line if there’s not 4 items it flexes the items to the left and right and leaves a large space between, is there any way to avoid this when there are less than for items in a row?
I know there are other ways but they seem to take the content away from the edge and when we have other content we want in line with this section in doesn’t look great.
I can’t find the page your screenshot is showing within your project.
How do you want the items to appear on the second row? In this particular example, do you want items 5 & 6 to be centered under items 1 & 2, and 3 & 4, respectively?
Sorry my bad forgot to give a link to that specific page, I want to achieve the same style as I would if I aligned it to the right and added margin, but I need it to flow with the content so it needs to be aligned left and right with margin in the middle. But when there are less than 4 items on the next row they should start at the 1st item and continue like the top row if that makes sense?
I’m at it again! Does it have to be bang on flush to the container on both sides? If your basis is 24% then there is going to have to be a gap somewhere as that leaves 1% unaccounted for…
Managed to fix it! I’ll tell you how because it’s really useful to know, Basically I lowered the basis to 23%, aligned the flex to left, added a 2% right margin, added a -2% right margin to the collection list and then boom!