引导网格视图具有不同的高度和行首先填充

Question

我有一个不等高度网格的视图。 我的HTML代码就像这样

<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>

我的css是

.grid-container{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}

渲染视图为 column filling first

但我想要它 row filling first

我已尝试使用col-md类，但它使所有网格大小相同，但我希望具有不相等的高度。 我的整个html div都是来自javascript的动态