Hi guys 
I’m trying to use Isotope on my layout.
It works beautifully except the fact that I have two columns instead of three.
I have set my images to be 33.33% width which is all fine until I add 10px margin left and right…
My question is, how can I set up my container so that it has threee items of 33.33% width AND 10px margin left and right.
Thank you so much ! 
Here is my read only link
Below is a a screenshot:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Mathematically? That’s not possible. 33.33%3=100% you run out of space to add 3(10+10) margins. That’s extra 60px. But of course you can have 3 equal-sized items with 10px margins each. The items will simply be less than 33.33% of the container.
The simplest way to do this is use percentage values for the margins (say 1%) so that means each item has a width + 2%. (33.33%-2%=31.333%). Let’s see if that makes sense: Subtract the margins from 100 (100-6= 94) and then divide that with 3 (94/3=31.33%). That’s the width of each item in your grid.
https://cl.ly/d2fd9b392ea7/Image%2525202018-09-24%252520at%2525205.02.40%252520PM.png
If you need to use fixed values like 10px for the margins, then use pixel values for the width of the items. So, if you’re using the native container, that’s 940px on desktop. 940-60= 880. 880/3=293.33px. That’s the width of each item.
Note that in this case, the layout isn’t responsive, you’ll need to adjust it (preferably switch to the percentage values) for smaller devices.
Hope this is helpful.
Maybe what I’m going to say is stupid, but why not just build the following thing :
container 100% > div 33.33% with 10px padding > image 100%
You can fill your isotope grid with whatever no ?
And if you want your container to erase the 10px margin on the extremes you just say container 100% width with margin -10px on both left and right
Hi @annakelian
Thank you so much for the explanations and screenshots !
Percentage based margin did the trick, pretty clever!
Best!
Anthony
You’re most welcome @anthonysalamin. I’m glad that resolved the issue.
@pepperclip’s, your solution isn’t stupid. In fact, it’s a clever solution. However, you’re adding extra divs. Remember, a good design that works well and loads faster is a smart design where you use less elements and less styling.
Speaking of less styling, the upcoming grid feature will help you create this layout without the need to apply margins or widths on the children. If you missed the sneak peak, check it out here:
Thanks for the explanation @AnnaKelian
I didn’t think that one extra div could make much of a difference… But I guess if this element is repeated x times it would probably be longer to load (and it’s a couple of more lines of code in the end).
I see in your screenshot that you use 1% margin on top/bottom and left/right > does this work with every browser ? I remember running into an issue with elements like that coupled with flex for instance (with 1% padding everywhere or 1% margin everywhere) some browser would only choose the 1% on left-right and not on top-bottom.
Div block might not make the code super heavy but less html and css is always better.
About the percentage values, I haven’t heard or seen any issues with margins and paddings per se but I remember safari having an issue with percentage values for height. Not sure if that was fixed though on Safari’s end. But, oh yes, note that browsers calculate top and bottom margins and paddings based on an element’s width and not its height. Stange, right? But that’s how they do it.
Note that you can also use vw and vh, they are supported in most browsers based on this.
