@mixin inuit_grid($columns, $col_width, $gutter_width)
  // Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
  .wrapper
    width: $columns * $col_width + $columns * $gutter_width - $gutter_width
    margin: 0 auto
    padding: 0 $gutter_width / 2

  // Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
  // We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
  .grids
    clear: both
    max-width: $columns * $col_width + $columns * $gutter_width
    margin: 0 0 0 0-$gutter_width
    // So we can make grids out of lists
    list-style: none


  // Here we are using an attribute selector to detect the string 'grid-' in an element's class. This works by assuming that anything we call grid-<n> we also want to be a grid item. It means less code and less for you to remember!

  // Ensure any grid item's FIRST class is a grid-<n> class. e.g.
  // VALID: class="grid-4 text-centre"
  // INVALID: class="left grid-4"
  [class^="grid-"]
    float: left
    margin: 0 $gutter_width 0 0

  .grids [class^="grid-"]
    margin: 0 0 0 $gutter_width

  // Allow nested grids:
  [class^="grid-"] .grids
    width: auto
    margin: 0 0-$gutter_width

  // create col classes
  @for $i from 1 through $columns
    .grid-#{$i}
      width: $col_width * $i + ($i - 1) * $gutter_width
      @if $i == $columns
        margin: 0