Настройте начальную загрузку на верхний div независимо от высоты строки (каменная кладка)

То, что я пытаюсь сделать, это простая сетка, похожая на каменную кладку. У меня есть, скажем, 10 col-md-4 ina row, поэтому он будет перенесен в 4 строки (последняя строка только с 1 элементом). Проблема в том, что блоки не одинаковой высоты (и я не хочу, чтобы они были), поэтому, когда один блок немного выше, чем другие в строке, следующая строка находится примерно на 10 пикселей ниже самого высокого блока и что я хочу каждый элемент должен быть на 10 пикселей ниже его верхнего блока, независимо от его высоты.

Вот скриншот и мой код:

<div class="row centered" style="margin-top: 30px;">
{% for post in posts %}
    <div class="show_post_box col-md-4 col-sm-6 col-xs-12" id="{{ loop.index }}">
        <div class="box post show_posts">
        {% if post.url is defined %}
            <a href="{{ post.url }}">
                <h2>{{ post.title }}</h2>
            </a>
            <p>{{ post.description }}</p>
        {% else %}
            {% from ("posts/" + post) import post_title, post_description %}
            <a href="/posts/{{ post }}">
                <h2>{{ post_title }}</h2>
            </a>
            <p>{{ post_description }}</p>
        {% endif %}
        </div>
    </div>
{% endfor %}
</div>