Padding between images when items are divs with background images - html

Question

I've got a bunch of divs with background images like this:
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
...and so on (there are 20+ divs).
Each div has it's own background image.
Right now, on large screens I want to display 3 divs per line so I've got this:
#media screen and (min-width:768px) {
div {
width:33%;
}
}
What I would like is a 'gutter' that is 2ch wide between each div. When I use padding:2ch; it doesn't work (no space between divs) and when I use margin:2ch; then the 3rd div goes down to the next line (even with box-sizing:border-box).
What's the simplest solution to this? Here's an example of what I want the divs to look like (see each class image: http://www.platinumfitnessaz.com/classes/).
Thanks in advance.

Answer 1

Contrary to comments, percentage vs ch units has nothing to do with it. It's just the fact that you don't have enough room to fit things in a row.
If your page is 100% wide, then 3 divs in a row that are 33% wide will of course not leave any room for a margin. box-sizing only affects padding and borders, not margins, so that won't help you.
The solution is to use a calc() function.
If you want a 2ch space around your divs, use 2ch as the margin. Then, if you want three per row, you can use calc(33% - 2ch) to get the width of each one.
We only really need a right and bottom margin to achieve the effect you want:
div {
width: calc(33.333% - 2ch);
height: 150px;
float: left;
margin-bottom: 2ch;
margin-right: 2ch;
background-color: firebrick;
}
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
That's the simple version. It doesn't fully maximize our space, though, because there's a 2ch margin on the right of the third column of divs that could be reapportioned to the divs themselves.
To fully make use of all the space, we can do a little math to make our calc expressions a bit fancier, and then use nth-child to only apply the right margin to the divs in the first and second column:
div {
width: calc(calc(calc(calc(33.333% - 2ch) * 2) + 33.333%) / 3);
height: 150px;
float: left;
margin-bottom: 2ch;
background-color: firebrick;
}
div:nth-child(3n+1),
div:nth-child(3n+2) {
margin-right: 2ch;
}
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>