制作具有流畅布局的砌体布局

Question

我正在使用这个非常棒且最受欢迎的图书馆http://masonry.desandro.com/来显示图像的砖石网格。

现在，我想要一个流畅的布局，即列宽应该根据父容器的宽度而改变。究竟bootstrap的.col-md-4是如何工作的。我确实将宽度设置为33％（因为我想要3列）然后我失去了响应能力;同时，将其设置为固定宽度（比如300），在列之间给出了太多的差距。

做类似的事情：

    // set columnWidth a fraction of the container width
    columnWidth: function( containerWidth ) {
        return containerWidth / 3;
    }

也没有帮助。

这是我目前的代码：https://codepen.io/vedant1811/pen/OXzOyo