I'm trying to figure out how to create a simple grid similar to Chris Coyier's "Don't Overthink it Grid" but I seem to be missing something. My boxes are 25%. Why don't the 4 boxes fit across the parent container? 25%+25%+25%+25% = 100%, no?
It appears to have to do with the margin but I thought this resolved that:
Border box works on padding, how you have it now, each element is 25% + 20px because of the margins, so right now it's 100% + 80px, I'd fork your pen if I wasn't on my phone right now.
http://codepen.io/nathangross/full/jwArH
I'm trying to figure out how to create a simple grid similar to Chris Coyier's "Don't Overthink it Grid" but I seem to be missing something. My boxes are 25%. Why don't the 4 boxes fit across the parent container? 25%+25%+25%+25% = 100%, no?
It appears to have to do with the margin but I thought this resolved that:
* { @include box-sizing(border-box); }Border box works on padding, how you have it now, each element is 25% + 20px because of the margins, so right now it's 100% + 80px, I'd fork your pen if I wasn't on my phone right now.
Ah, got it. I didn't realize border box didn't affect margin. It makes sense now that I think about it. Thanks ChrisP. Pen is updated.