0

What I'm trying to do is a simple "masonry-like" grid. I have lets say 10 col-md-4 ina row, so it will wrap in 4 line (last line with only 1 element). The problem is that the blocks are not of same height (and I don't want them to) so when a single block is slightly higher than the others in a row, the next row is ~10px bellow the tallest block and what I want is each element to be 10px bellow his upper block, regardless of its height.

Here is a screenshot and my code:

<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>
dzervas
  • 250
  • 2
  • 14
  • 1
    Bootstrap grid is the wrong tool for the job. Whenever a floated div breaks line, it'll always be below the lowest element anywhere above it. You'd need to either code it in JS, or use a 3rd party library like this one: http://masonry.desandro.com/ – Artless Apr 06 '17 at 17:51
  • Can you post a demo of what you have currently? It's kind of unclear what you're trying to do. Have you put masonry on already? Masonry doesn't care about line-height. – Michael Coker Apr 06 '17 at 17:51
  • @dzervas did mean CSS `line-height`, or just height? "Problem is that the blocks are not of same height" makes me think the latter. – Carol Skelly Apr 06 '17 at 17:59
  • @ZimSystem just height. You're right about the duplicate, exactly what I was searching! – dzervas Apr 06 '17 at 18:06

0 Answers0