Stacking columns unevenly

Question

I'm using Bourbon Neat for my grid system.

I've attached an image because I felt that describing what I want would be more confusing than looking at an image.

The blocks are posts (article tags) from Wordpress. I know that I could achieve this if I used four columns and then added each post to one of the columns. The problem with that is responsiveness; once re-sized down, the right columns would get pushed below the left columns which would then take all of the posts out of chronological order.

The very basic version of the markup:

<div id="posts">
    <div>
        <section>   
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </section>
    </div>
</div>

This is a dumbed down version of the SASS (SCSS):

#posts > div > section
{
    @include row;

    > article
    {
        /* the grid is an 8 column grid, each article spans 2 columns */
        @include span-columns(2)

        &:nth-of-type(4n+4)
        {
            @include omega;
        }
    }
}

Image for clarity:

enter image description here

I could be misunderstanding what Masonry does exactly, but wouldn't that be a completely different grid system than using Bourbon Neat? — gin93r, Jul 15 '15 at 13:32
the type of stacking that Masonry does is done via JS. your solution is effectively not working in the way you want to work, as here grids are defined in a different way: all elements float on the left/right hence causing a bit of problems when the height is a bit different. Effectively CSS grids are stacking elements per rows and simulating columns in a way. — Mr Peach, Sep 20 '15 at 16:53

Stacking columns unevenly

0 Answers0