I have a confession; I’ve been keeping something from you. Take a look at the following screenshot and if you are the kind of designer that freaks out when there is a pixel astray, please make sure you’re sitting down.
Can you see an odd-sized gap before the final red grid item? The screenshot is taken in Safari 6. This same problem isn’t apparent in Chrome or Firefox. That’s because Safari rounds down sub-pixels. Why?
Although the outer dimensions of the grid (the context) may be set as ems, all the column widths within the grid are defined as percentages. That’s a large part of what enables the grid to be responsive to different viewports.
To actually paint the page, browsers convert percentage values into pixels. Parts of pixels cannot be rendered so they are rounded. The problem is that some browsers round up, some don’t, and some do something else. Most of the time this isn’t an issue. In some browsers, in some instances it is, typically when there are multiple...
