box-sizing border-box makes a percentage grid add up

Three columns at 33.333% with 10px of padding and a 1px border do not fit on one line, because the default box model adds padding and borders outside the declared width. Every grid framework works around this with a wrapper element, and every hand-built one rediscovers it on the third column.

/* content-box: 33.333% + 20px + 2px, three times */
.col { float: left; width: 33.333%; padding: 0 10px; border: 1px solid #ddd; }

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

With border-box the declared width is the outer width, so the three columns fit whatever padding they carry and changing a gutter stops being a change to a width. Two caveats. Margins are still outside the box, so a grid whose gutters are margins needs the old arithmetic regardless — put the padding inside the column and the margin nowhere. And IE8 honours box-sizing in standards mode only while IE7 ignores it entirely, so if IE7 is still supported the percentage grid needs a fixed-pixel fallback rather than a polyfill. Applying it universally also changes the layout of any third-party widget whose CSS assumed the default, which is worth checking before shipping it site-wide.