Hello,
using grid layout i have no issue creating a grid with element having an even space between them, but when i use flexbox, it’s not working anymore, it pushes the 3rd column to the left when i am trying to have item have 33.33% of their “flex” parent container when i add a “gap” on the parent container.
screen recording of my issue:
https://vimeo.com/1024748376/f6ae740741?share=copy
Hello @anthonysalamin, yeah so the issue you have with flex is that when you add your gap it accounts to the full width of the container, so it makes it 100% + 16px. And so you have to account for that on each item, so to fix it, on a code embed you have to set a calc for the width of your items, something like this:
<style>
.collection-item {
width: calc(33.333333333333336% - 8px);
}
</style>
I hope this helps.
Amazing, yes it works !
Clever css ninja move - thank you @Pablo_Cortes !
after further inspection, it seems the css trick is resolving only half of the issue. there is still a weird margin on the right hand side. i can try to lower the px amount in the css rule by 6 but it doesn’t quite do the trick 
here is the updated webflow link
https://preview.webflow.com/preview/flex-with-gab?utm_medium=preview_link&utm_source=designer&utm_content=flex-with-gab&preview=5ed3d69d8046e43f509c6a7ad17e0a70&workflow=preview
@anthonysalamin, I see what you are saying, I mean if the background color is the same the 8px is kind of imperceptible, but I see where you are coming from. So to fix it give your collection list the following edits
.collection-item {
/* 8px margin takes up space, so we subtract (16px ÷ 3) from each item */
width: calc(33.33% - 5.333px);
margin-right: 8px;
}
.collection-item:nth-child(3n) {
margin-right: 0;
}
Good luck!
awesome, yes i understand now. your code did the trick, thank you !