CodePen

HTML

            
              <div class="grid">
  <div class="col col-1">...</div>
  <div class="col col-2">...</div>
  <div class="col col-3">...</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @columns: 12;
@column-width: 4em;
@gutter-width: 2.5em;
@support-old-ie: false;

#grid() {
  text-align: justify !important;
  text-justify: distribute-all-lines;
  font-size: 0 !important;

  & > * {
    text-align: left;
    font-size: medium;
  }

  &:after {
    content: '';
    display: inline-block;
    width: 100%;
  }

  .cell() {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    
    .lt-ie8 & when (@support-old-ie) {
      display: inline;
      zoom: 1;
    }
  }

  .span(@cols, @total: @columns) {
    width: percentage((@column-width * @cols  + @gutter-width * (@cols  - 1)) /
                      (@column-width * @total + @gutter-width * (@total - 1)));
  }

  .push(@cols, @total: @columns) {
    left: percentage((@column-width + @gutter-width) * @cols /
                     (@column-width * @total + @gutter-width * (@total - 1)));
  }

  .pull(@cols, @total: @columns) {
    left: percentage((@column-width + @gutter-width) * -@cols /
                     (@column-width * @total + @gutter-width * (@total - 1)));
  }

  .prepend(@cols, @total: @columns) {
    margin-left: percentage((@column-width + @gutter-width) * @cols /
                            (@column-width * @total + @gutter-width * (@total - 1)));
  }

  .append(@cols, @total: @columns) {
    margin-right: percentage((@column-width + @gutter-width) * @cols /
                             (@column-width * @total + @gutter-width * (@total - 1)));
  }
}






.grid {
  #grid;
  background: blue;
}
.col {
  #grid > .cell;
  #grid > .span(4);
  background: green;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................