Is there a grid system that use percentage-based width for columns and px values for gutters?

Question

I'm looking for a grid solution that will be supported by IE11 which uses percentage-based column widths and px-based gutters. I'm looking for a grid layout with evenly spaced halves, thirds, quarters, sixths, and twelfths, in which the margin may vary depending on the breakpoint. Is this possible?

@import "compass/css3";

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-2 {
    width: 50%;
}
.col-1-4 {
    width: 25%;
}
.col-1-8 {
    width: 12.5%;
}

.module {
  padding: $pad;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

body {
    padding: 10px 50px 200px;
  background: url(https://s.cdpn.io/3/[email protected]);
  background-size: 300px 300px;
}
h1 {
  color: white;
  em {
    color: #666;
    font-size: 16px;
  }
}

Chris Coyier posted a solution, but it's a little wonky, because the gutters are defined by the right padding of the columns: https://codepen.io/chriscoyier/pen/eGcLw Which means, the column widths are not accurate. For example, the first column of a 2 col layout will be less than 50% to account for the gutter, but the second column would be exactly 50% of the grid width, since it there is no right gutter on the last child.

I've had some issues with flex and grid layouts with IE11, so I plan on just using floated block elements.

Answer 1

This is what I came up with. I'm not a math guy, so I can't tell you why these width equations work, or if there's a better algorithm.

https://codepen.io/richiegarcia/pen/YBEVQR

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: 0; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / 2); }
.col-1-3 { width: calc(100% * 1 / 3 - 20px / 1.5); }
.col-1-4 { width: calc(100% * 1 / 4 - 20px / 1.33); }
.col-1-6 { width: calc(100% * 1 / 6 - 20px / 1.2); }
.col-1-12 { width: calc(100% * 1 / 12 - 20px / 1.09); }