Items don't line up nice

[wotta]

Hello, First off I want to thank you for making this plugin.

I have been looking for quite some time to find a way or plugin that helps me with getting a sort of masonry look.

Now I tried a bit out but the items don't line up nice ( at some random point 🤔 ), see screenshot below.

I will include the code that I am using, and I hope that you can and are willing to help me out.

    <div class="col-count-3 col-w-lg col-balance-all col-gap-sm col-rule-md -mx-12">
        @foreach ($posts->where('featured', false)->take(6) as $post)
            <div class="grid-item post-preview md:w-full md:mx-2 @if(! $loop->first || $loop->last) my-3 @endif md:rounded">
                @include('_components.post-preview-inline')
            </div>
        @endforeach
    </div>

Best regards.

[hacknug]

Hey there! 👋

What's happening is that the multi-column algorithm is trying to make all columns the same height. If you want to prevent items from breaking into multiple columns, you're gonna have to tell the browser to do so.

I'd recommend using my other plugin for this: https://github.com/hacknug/tailwindcss-break

The class you're looking for is probably .bi-avoid, which will prevent you items from breaking in both columns, pages and regions. If you only wanna prevent it on columns, use .bi-avoid-column.

Let me know if that solves your issue.

[hacknug]

Please note this plugin isn't supposed to give you a real masonry layout, so don't expect to have much more control over the layout and items than what the Multi Columns spec actually supports.

I've also been thinking about releasing a real masonry plugin for Tailwind for a while so, if that happens, I'll let you know if/when haha

[wotta]

@hacknug Sorry for the late reply, but I got it working. I would love to know when you release a masonry plugin, I would love to use it.

[hacknug]

@wotta I'll let you know when I do. First thing is adding support for v1.x for all of my plugins that haven't been updated yet 😉