16 колонок в 12

Для http://toster.ru/q/149925

by Michael Danilov

HTML

<link rel="stylesheet" href="https://rawgit.com/necolas/normalize.css/master/normalize.css">
<section class="container_16">
  <div class="grid_4">Блок 1</div>
  <div class="grid_4">Блок 2</div>
  <div class="grid_4">Блок 3</div>
  <div class="grid_4 visible-large">Блок 4</div>
</section>

SCSS

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  min-width: 1200px;
}
$widthContainer = 1200px;
$cols = 12;
$colWidth = $widthContainer / $cols;

.container_16 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: $widthContainer;
}

@for $i from 1 through $cols {
  .grid_#{$i} {
    border: 1px solid #000;
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    text-align: center;
    width: $colWidth * $i - 20px;
  }
}

.grid_13, .grid_14, 
.grid_15, .grid_16 {
  display: inline;
  float: left;
  position: relative;
  width: $colWidth * $cols;
}

.visible-large {
  display: none;
}

@media (min-width: 1600px) {
  $widthContainer = 1600px;
  $cols = 16;
  $colWidth = $widthContainer / $cols;

  .container_16 {
    width: $widthContainer;
  }

  @for $i from 1 through $cols {

    .grid_#{$i} {
      margin-left: 10px;
      margin-right: 10px;
      width: $colWidth * $i - 20px;
    }

  }

  .visible-large {
    display: block;
  }
}