How to fit in right content into div?

How to fit in right content into div?
0
#1

pen: [ http://codepen.io/ustvarno/pen/yJWJox ]

I have much canvases in grid ( parent-div )
Parent div have width 400px and height 350px and border 4px
So for organizing this canvases to fit in i do
if i have grid of 4 x 4, and on every node border 1px solid …

-width: ( ( 400px - 4px2 ) - ( 1px * 2 * 4 ) ) / 4
height: ( ( 350px - 4px2 ) - ( 1px * 2 * 4 ) ) / 4

but still it doesn’t fit
try to enter to grid number in my pen 10 or 20, u’ll see white gap

Also, i set border to 1px, but still looks big, is there any possiblity to make it thinner?

#2

This doesn’t really answer your question, but it might point you toward a solution. I’ve found that the outline property is sometimes easier to work with in this sort of situation - the outline sits inside the div (instead of outside, like a border), so it doesn’t add to the div’s size. And that can make calculations a lot simpler.