html - 自動固定幅の列を使用するときに CSS 複数列レイアウトで適切な幅を使用するにはどうすればよいですか?

Question

CSS Multi-column Layout Moduleに適切な幅を自動的に持たせる方法はありますか?

.collection {
  height: 100%;
  -webkit-column-count: auto;
  -webkit-column-width: 100px;
  -webkit-column-gap: 0px;
}
.collection > div {
  display: inline-block;
  background-color: black;
  width: 100%;
  height: 100px;
}

http://jsfiddle.net/zBsBG/

12 個の要素を使用する場合、現在、.collection要素の幅をビューポートの幅に自動的に設定しています。

自動的に作成される列の数に応じて、適切な幅にしたいと思います。たとえば、幅が 3 列の場合、幅は約 300px にする必要があります (ビューポートの幅ではありません)。

何か不足していますか？

編集：.collection要素の幅を指定できることはわかっていますが、それは列幅を具体的に設定して自動にカウントするという目的を無効にします。可変幅にしたい。

これは、JavaScript を使用して手動で簡単に回避できますが、可能であれば回避したいと考えています。