A Pen by Anthony Lukes.

index.html

<div class="container">
<ul class="blocks blocks_2up">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<br />

<ul class="blocks blocks_3up">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<br />

<ul class="blocks blocks_4up">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
</div>

rjitH.markdown

rjitH

A Pen by Anthony Lukes on CodePen.

License.

style.scss

@import "compass";
$MARGIN: 10%;
$TRUE_WIDTH: 100% / (100% + $MARGIN);

@mixin blockWidth($numOfCols) {
  width: (1/$numOfCols * 100%) - ($MARGIN * $TRUE_WIDTH);
}


.container {
  width: 800px;
  background-color: blue;
  margin: auto;
}

.blocks {
  font-size: 0;
  margin-left: -$MARGIN;
}

.blocks > * {
  display: inline-block;
  font-size: 16px;
  background-color: green;
  margin-left: percentage(1 - $TRUE_WIDTH);
}

.blocks_2up > * {
  @include blockWidth(2);
}

.blocks_3up > * {
  @include blockWidth(3);
}

.blocks_4up > * {
  @include blockWidth(4);
}