Simple custom css grid

_custom_grid.sass

// Based on https://css-tricks.com/dont-overthink-it-grids/
$pad: 5px

$total-columns: 12
$column-width: 100 / $total-columns

// Column size in percents
// $n - col num
@function grid-column-width($n)
  @return ($column-width * $n * 1%)

.grid
  margin: 0 0 $pad 0

  &:after
    content: ""
    display: table
    clear: both

[class*='col-']
  float: left;
  padding-right: $pad;

  .grid &:last-of-type
    padding-right: 0;

.col-one
  width: grid-column-width(1)

.col-two
  width: grid-column-width(2)

.col-three
  width: grid-column-width(3)

.col-four
  width: grid-column-width(4)

.col-five
  width: grid-column-width(5)

.col-six
  width: grid-column-width(6)

.col-seven
  width: grid-column-width(7)

.col-eight
  width: grid-column-width(8)

.col-nine
  width: grid-column-width(9)

.col-ten
  width: grid-column-width(10)

.col-eleven
  width: grid-column-width(11)

.col-twelve
  width: 100%
  margin-left: 0

[class*='col-']
  background: #eee

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