<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 columns in 1 .. grid-columns
  .grid-{columns} 
    width: (columns / grid-columns) * 100%;



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