Dynamic Stylus Grid

grid.html

<!-- usage -->

<div class="cols">
  <div class="col col-50"></div>
  <div class="col col-50"></div>
</div>

<div class="cols">
  <div class="col col-33"></div>
  <div class="col col-33"></div>
  <div class="col col-33"></div>
</div>

grid.styl

$width = 960px
$columns = 1 2 3 4 6 8 10 12
$gap = 20px
$padding = 5px
$font-size = 13px

.cols
  width:$width
  padding-top:($gap/2)
  padding-bottom:($gap/2)
  margin-left:auto
  margin-right:auto
  font-size:0

  .col
    box-sizing:border-box
    display:inline-block
    margin-left:($gap/2)
    margin-right:($gap/2)
    font-size:$font-size
    padding:$padding
    vertical-align:top

  for $column in $columns

    $percentage = round((($width/$column) / $width) * 100)

    .col-{$percentage}
      width:round(($width/$column)) - $gap