Using the CMS Collection List, Items get extra space

[Scott_Clark]

I’m using a CMS collection list to display a grid of “Advantages”. When using display:flexbox;
flex-wrap: wrap;
gap:16px;

It adds a 16px margin to the left of the 1st item. I’ve read that it’s behavior cooked into containers and I should use a div instead, but I don’t have a choice when using Collection List.

Are there any other work arounds?

Its the section about halfway down the page, “Why Use the Repowr Marketplace”, and only seems to happen when there are 4 cards on one row.

---

Here is my site Read-Only:[ LINK]
(how to share your site Read-Only link)

[memetican (Michael Wells)]

It looks as though you’ve fixed it?
Collection lists have nothing to do with containers, and your setup here is fine.

[thewebflowteam]

Hey!

As an experienced web developer, I can assist you in resolving the issue with your CMS collection list and flexbox grid. I have the expertise to implement effective workarounds to ensure your “Advantages” section displays correctly.

Thanks

[Scott_Clark]

@memetican When it’s 3 across, it looks fine, but when it’s 4 across (wider screens), I get the 16px indent on the first item.

It’s doing it here as well.

But in this case, the wrapped row isn’t staying within the container width.

[webdev (Jeff Selser)]

@Scott_Clark - I recommend you use grid, set a gap as needed, and remove margin on items.

[Scott_Clark]

@webdev Grid was definitely the right solution. Thank you.

[brynnwilder]

@Scott_Clark

I’m using a CMS collection list to display a grid of “Advantages”. When using display:flexbox;
flex-wrap: wrap;
gap:16px;

It adds a 16px margin to the left of the 1st item. I’ve read that it’s behavior cooked into containers and I should use a div instead, but I don’t have a choice when using Collection List.

Are there any other work arounds about tester for google app?

Its the section about halfway down the page, “Why Use the Repowr Marketplace”, and only seems to happen when there are 4 cards on one row.

The issue you’re experiencing with extra margin on the first item in a Collection List when using display: flex and flex-wrap: wrap is a known behavior related to the way flexbox handles layout and spacing. While the Collection List component in Webflow can have certain limitations, there are a few potential workarounds to address this issue:

1. Adjust Container Padding: Instead of adding margins directly to the items, you can try adjusting the padding or margins of the container or wrapper element to account for the extra space. This way, you can balance out the layout without affecting individual items.
2. Negative Margin: You can use a negative margin on the container to counteract the extra space. For example, if you have a gap of 16px, applying -16px margin to the left of the container might help reduce the unwanted space.
3. CSS Grid: Consider using CSS Grid instead of Flexbox for the layout. CSS Grid can offer more control over spacing and item placement. You can define explicit rows and columns, which might eliminate the issue with extra space on the first item.
4. Custom Code: If you’re comfortable with custom code, you can add custom CSS to address the issue. For example, you can use a combination of flex properties and pseudo-elements to create the desired spacing effect.
5. Container Width: Ensure that the width of the container is correctly calculated and doesn’t cause unintended overflow or spacing issues. Sometimes adjusting the container’s width or adding constraints can resolve layout problems.

In your specific case, where the issue seems to occur with 4 cards in a row, testing these solutions in the Webflow Designer or adding custom CSS might help you resolve the extra margin issue. If none of these workarounds are effective, you might also want to consult Webflow’s support or community forums for additional guidance tailored to the platform’s quirks.