CSS具有流体布局多列网格，其中每个div的高度不同

Question

我想制作一个由3列组成的布局。 3列由div组成，每个列包含可变长宽比的图像。我想在3列中堆叠这些多高度div，使得它们之间的间隙（边距）在垂直和水平方向上相等。外面不应有边距/填充;即3列应该跨越容器的100％。

以下是一个例子：

在较小的屏幕上，我会将3列折叠成1，并将所有div垂直堆叠。

In my fiddle我们可以看到我使用column-count来获得3列。我的问题是将column-width和margin-bottom设置为一致的值，它们会产生相同的差距：容器宽度的1.5％。

这是我使用的CSS。 .container容纳了许多.tile div，而每个div都拥有未知维度的图像。孩子divs的数量也是未知的。

.container {
    width:100%;
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
    column-gap: 1.5%;
    -moz-column-gap: 1.5%;
    -webkit-column-gap: 1.5%;
    border:1px black solid;
}
.tile {
    margin-bottom:9%;
}
.tile img {
    width:100%;
    height: auto;
    display:block;
}

HTML：

<div class="container">
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/130" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/125" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/50" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/150" alt="" />
    </div>
</div>

如何将每个div（水平和垂直）之间的间距设置为流体值？