包含分布式项目的网格

Question

我正在尝试构建一个网格，其中项目在一行中彼此等距。 是否可以使用css实现此布局而不在最后一行中运行此问题？

我做了一点笔来演示这个问题 http://codepen.io/Koopa/pen/RWBdxX

Haml的

<input type="range" id="weight" min="36" value="52" max="72" step="2">
<div id="container">
- 20.times do
  %div.item
    %div
</div>

CSS

#container {
  text-align: justify;
  border: 10px solid black;
  width: 240px;
}
#container div.item {
  width: 36px;
  height: 64px;
  display: inline-block;
  padding: 2px;
  div{
    background: green;
    width: 100%;
    height: 100%;
  }
}
#container:after {
  content: '';
  width: 100%; 
  display: inline-block;
}

JS

$('input').on('change', function() {
    var width = $(this).val();
    $('#container div').width(width)
    $('#container div').height(width * 16/9)
});

谢谢

亲切的问候

库巴