Laying out items using Masonry

Question

I am using Bourbon and its accompanying grid framework Neat to create a site and would like to integrate Masonry into an area of the layout to show news articles.

I think I've got everything set up right, but it seems Masonry's calculations are a bit off, as the articles which should be sitting side-by-side are just stacking one underneath the other.

For my layout, I'm using Neat's standard @include span-columns() mixin, as well as flexbox on the article element itself so I can layout elements within the article.

I've included a grid-sizer 'helper' div to allow Masonry to understand how large each column should be, as per the Masonry docs, so my HTML markup is as follows:

<div class="o-row">
    <div class="o-contain">
        <div class="news__listing js-articles">
            <div class="u-grid-sizer js-grid-sizer"></div>

            <article <?php post_class('c-article c-article--listed js-articles__item'); ?>>
                <header class="c-article__header">
                    <?php if (has_post_thumbnail()) {
                        $image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'large'); ?>

                        <img class="c-article__image" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" />
                    <?php } ?>

                    <h2 class="c-article__title"><?php the_title(); ?></h2>
                </header>

                <div class="c-article__summary s-cms-content">
                    <?php the_excerpt(); ?>
                </div>

                <footer class="c-article__footer">
                    <a class="c-button c-button--gamma" href="<?php the_permalink(); ?>">Read blog post</a>
                </footer>
            </article>
        </div>

        <div class="news__sidebar c-sidebar">
            <?php get_sidebar(); ?>
        </div>
    </div>
</div>

The CSS I'm using on both the parent container and the articles themselves are as follows:

.news__listing {
    @include media($m-up) {
        @include span-columns(8);
        @include omega(2n);
    }
}

.c-article {
    .news__listing & {
        margin-bottom: $space;

        @include media($m-up) {
            @include span-columns(6);
            @include omega(2n);
            @include display(flex);
            @include flex-direction(column);
            @include flex-shrink(0);
        }
    }
}

.u-grid-sizer {
    .news__listing & {
        @include media($m-up) {
            @include span-columns(6);
            @include omega(2n);
        }
    }
}

and the JS used to call and implement Masonry is simply:

jQuery(document).ready(function($) {
    $('.js-articles').masonry({
        columnWidth: '.js-grid-sizer',
        itemSelector: '.js-articles__item'
    });
});

Am I doing anything obviously wrong? If I remove the js-articles class from my markup, the article elements space themselves out correctly, insofar as they appear two-up on the page, albeit with large margins underneath each 'row' of articles, which is what I'm trying to use Masonry to remove.

Answer 1

I've managed to get Masonry working with Neat, using the same sort of layout you describe. The main problem as far as Neat goes is that because Masonry moves things around, Neat's handling of gutters (omega, etc) doesn't really work with Masonry, and the gutters get in Masonry's way. (Usually Neat uses the 'span-columns' value to take the right gutter off items that sit in the last column; with Masonry that no longer works because there's no guaranteeing which column an item will appear in). Here are the steps that might help get a Neat layout working with Masonry:

• Instead of the default display, use span-columns with display table. (eg. span-columns(6, table);) This removes the gutter and ensures that everything is the expected width for Masonry. You shouldn't need to set omega if you're doing this.
• You can then achieve a gutter effect by cheating slightly and adding a gutter's width of padding to each Masonry element - eg. padding-right: $gutter (though you may need to adjust the width of the container element or alternatively nudge its position slightly - eg. by giving it margin-left: $gutter / 2; - to compensate for the extra gutter on the final column that Neat would usually remove).
• In my experience, you only need a grid-sizer element if you have Masonry items of varying widths. If all the items are the same width, you should be able to just initialise Masonry with the itemSelector option alone.