I've been developing website for many years and after a years break I'm getting back into it, so decided this would be an ideal time to look into grids and responsive design. Over the last few days I've been reading and experimenting a lot with CSS grids and the theories behind them. I even started developing my own in SCSS that had variable % margins for each breakpoint (so mobiles don't get squished gutters).
What I have learned so far has left me with a rather mixed opinion on grids. Fixed grids seem anti-responsive, fluid grids can suffer from rounding errors, and those that don't seem overly complicated. I'm loving grids in theory but in practice they haven't entirely convinced me.
However, I've just come across a method of creating a fluid CSS grid that seems nearly perfect by using padding and border-box for gutters instead of margins. The gutters remain proportional, rounding errors are minimized and it is possibly more flexible for design. The only downside I can see so far is that old IE's need a fix (nothing unusual there then).
But this method doesn't seem to be very widely adopted, which is (rightly or wrongly) making me wary of it. Apart from the article linked above, every article and fluid grid system I've come across uses margin instead of padding for gutters (and only one of those tackled the problem of rounding errors).
So why is this method so prolific? And what's the catch with using padding/border-box instead of margin for gutters?
What you're asking is basically why people aren't using box-sizing: border-box, right?
I can only guess. It may be because they want to support older versions of IE, because all their old modules are writted to work under the default box model content-box and can't be arsed to rewrite it, or it may be because of simple ignorance. In the case of larger CSS grids, it may be to appeal to a the larger, unaware audience.
Either way, the drawbacks are fairly irrelevant. You change the box model to subtract border and padding values from a width or height rather than add to it. This means width and height written using the default box model may need to be rewritten to not account for any padding or border the element might have. That's all, really.
Browser support goes back to IE8, and there's even a polyfill for IE6 and IE7, so no need to worry about that.
The one quirk I've noticed using border-box is that when you apply a border or padding to a non-square image, the image is slightly scewed unless you set its height to auto. But in this era of RWD, who doesn't do this already?
Give it a few years and everybody will be using border-box rather than content-box.