Html CSS动态网格定位不同高度

我正在尝试用CSS构建一个简单的图像网格，它在4列中显示图像，并且在它们下面没有间隙和动态浮动位置

CSS:

HTML:

下面是一个显示我目前拥有的HTML和CSS的示例。您可以看到右下角的图像之间有空格

我需要它看起来像这样（或类似），并且当我将新元素添加到img grid div时，允许元素整齐地彼此靠近，同时确保旧元素保持其位置

我尝试使用CSS3列来实现这一点，但它们无法很好地将元素动态附加到img grid div，从而使旧图像改变位置

---

提前感谢。

这是一种砌体布局。 我刚和你一起去的

在这里查看解决方案

$（文档）.ready（函数（）{
$（'.img网格'）。砌体({
//选择权
itemSelector:“.img网格项目持有者”，
列宽：150
});
});
.img grid.img grid物品夹{
宽度：150px；
显示：内联块；
填充：0px；
边际：0px；
}
.img网格img{
宽度：100%！重要；
高度：自动！重要；
}
谢谢，这看起来确实令人印象深刻。我不知道砖石，但这确实是我想要的。谢谢
.img-grid .img-grid-item-holder {
    display: inline-block;
    text-align: left;
    width: 25%;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.img-grid img {
    width: 100% !important;
    height: auto !important;
}

<div class="img-grid">
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/400/800/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/350/750/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/500/600/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/410/430/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/320/650/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/350/750/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/500/600/cats" />
    </div>
</div>