<div class="grid-1">1</div>
<div class="grid-11">11</div>
<div class="grid-2">2</div>
<div class="grid-10">10</div>
<div class="grid-3">3</div>
<div class="grid-9">9</div>
<div class="grid-4">4</div>
<div class="grid-8">8</div>
<div class="grid-5">5</div>
<div class="grid-7">7</div>
<div class="grid-6">6</div>
<div class="grid-6">6</div>
<div class="grid-12">12</div>
$grid-columns: 12;

@for $i from 1 through $grid-columns {
  .grid-#{$i} {
    width: percentage($i / $grid-columns);
  }
}


// styles
[class^='grid-'] {
  border: 1px solid;
  box-sizing: border-box;
  float: left;
  padding: 1em 0;
  text-align: center;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.