Accounting for Rounding errors Grid

Question

I am in search for a pixel perfect grid. I have tried the major frameworks but both have obvious rounding errors. I was hoping to start a conversation on how you guys account for such errors when trying to achieve pixel perfect design.

Chrome seems to render the best with almost no visible error. Safari is the worst.

Here is a screen Shot of Bootstrap Grid in Safari
html:

 <div class="container">
  <!-- Example row of columns -->

 <div class="row">
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>

 </div>

<div class="row">
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>


</div>


<div class="row">
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>



</div>

<div class="row">
    <div class="col-md-4"><div class="content"></div></div>
    <div class="col-md-4"><div class="content"></div></div>
    <div class="col-md-4"><div class="content"></div></div>

</div>

<div class="row">
    <div class="col-md-6"><div class="content"></div></div>
    <div class="col-md-6"><div class="content"></div></div>


</div>

<div class="row">
    <div class="col-md-12"><div class="content"></div></div>


</div>


</div>

(jsFiddle: http://jsfiddle.net/gnrhca1p/)

Here is an example of the Foundation grid in Safari html:

  </div>
  <div class="row">
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-4 columns"><div class="content"></div></div>
      <div class="medium-4 columns"><div class="content"></div></div>
      <div class="medium-4 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-6 columns"><div class="content"></div></div>
      <div class="medium-6 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-12 columns"><div class="content"></div></div>


  </div>

(jsFiddle: http://jsfiddle.net/)

Answer 1

Here are a couple solutions that I found but have not tried:

https://github.com/zurb/foundation/issues/3230

Answer 2

Fluid grids for pixel perfect design?

Bootstrap and Foundation are fluid. You can make your own grid system by using percentages up to a breakpoint, say anything under 600px and then at the 600px min-width, 900px, 1200px, etc., start making containers and columns that are sized in pixels. This is what you see with some Masonry implementations.

Answer 3

I've made myself a grid system without rounding errors and where the first and last cell is flush with the edges, that I use everywhere:

https://jsfiddle.net/8hz0wycv/

The css is compiled from this Less CSS:

@colBaseUnit: 8.5%;

.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 {
    float: left;
    margin-left: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &:first-child {
        margin-left: 0;
    }
}
.span1 {width: ((1 * @colBaseUnit) - 2%)}
.span2 {width: ((2 * @colBaseUnit) - 2%)}
.span3 {width: ((3 * @colBaseUnit) - 2%)}
.span4 {width: ((4 * @colBaseUnit) - 2%)}
.span5 {width: ((5 * @colBaseUnit) - 2%)}
.span6 {width: ((6 * @colBaseUnit) - 2%)}
.span7 {width: ((7 * @colBaseUnit) - 2%)}
.span8 {width: ((8 * @colBaseUnit) - 2%)}
.span9 {width: ((9 * @colBaseUnit) - 2%)}
.span10 {width: ((10 * @colBaseUnit) - 2%)}
.span11 {width: ((11 * @colBaseUnit) - 2%)}
.span12 {width: ((12 * @colBaseUnit) - 2%)}

It works because 102% / 12 is 8.5% All but the first cells are (8.5% * X) - 2% wide but with 2% left-margin. Since the first cell does not have left margin, it still adds up to 100% exactly.

It requires that the cells have 2% spacing but fortunately this is usually a quite nice width for the spacing, not too little and not too much.

It will have a slight rounding error sometimes about one pixel depending on the total width, this is unavoidable. But since the percentages themselves doesn't have rounding errors it's just the final step where the width is made into whole pixels where the error appears. And it seems to always be rounded down so it never overflow the width. And if you pick max-widths that give round numbers when multiplied with 0.085 you'll almost never see a 1px rounding error.

The best thing about this system is that since there is no margins left and right, you can nest it (without using complicated negative margin tricks) and it just works (the inner spacing will be somewhat different, though). This is the reason I decided to make my own grid system.