What it is: a masonry layout places items of different heights in tight columns with no empty gaps, like a Pinterest board. Native CSS masonry is still in development and not stable across browsers, but the columns property gives you a reliable version today with no JavaScript.

HTML

<div class="lotgrafix-masonry">
    <div class="lotgrafix-item">Short card</div>
    <div class="lotgrafix-item">A much taller card with more text inside it</div>
    <div class="lotgrafix-item">Medium card</div>
</div>

CSS with a fixed number of columns

.lotgrafix-masonry {
    column-count: 3;
    column-gap: 20px;
}

.lotgrafix-item {
    break-inside: avoid;
    margin-bottom: 20px;
}

Responsive with a minimum column width

Let the browser decide how many columns fit.

.lotgrafix-masonry {
    column-width: 250px;
    column-gap: 20px;
}

Gallery images

.lotgrafix-masonry img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
    break-inside: avoid;
}

Important limitation

Items flow from top to bottom inside each column, then continue in the next column. The visual reading order is not left to right. If the order matters, like a ranking or a timeline, use CSS Grid instead.

Use it in a WordPress loop

<div class="lotgrafix-masonry">
    <?php while ( have_posts() ) : the_post(); ?>
        <article class="lotgrafix-item">
            <?php the_post_thumbnail( 'medium' ); ?>
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        </article>
    <?php endwhile; ?>
</div>