Bulma: Feature request: masonry-like columns

[tony]

https://github.com/twbs/bootstrap/blob/1da730c67f82324477ae1a029407b4bc04db94ee/scss/_card.scss

https://getbootstrap.com/docs/4.0/components/card/#card-columns

These columns work in a different way, they allow variable height, which is closer to what pinterest has. This is sort of like tiles, but automatic

[tony]

Using the BS4 card columns on https://www.hskflashcards.com right now (still running BS4)

I'm doing a small port of BS4 card columns to bulma as a demo.

(on local machine while converting site bs4 -> bulma)

[choonggg]

This isn't a bulletproof way because cards are arranged from top-bottom and not left-right.
Should avoid if you are dynamically inserting elements (eg infinite scrolling).

Currently no way of doing this without js involved.

[jgthms]

As @choonggg pointed out, this is not exactly a Masonry layout, since the cards are laid out differently than in Pinterest.

[tony]

Currently no way of doing this without js involved.

What does that mean? JS is required to do dynamic things in general.

in any event, bulma's generally leaves those problems up to the user to program the JS.

this is not exactly a Masonry layout, since the cards are laid out differently than in Pinterest.\

whether it's masonry/pinterest/etc isn't essential to me. The columns are variable height, since the content within the items vary.

Here's my very rough port of it: https://gist.github.com/tony/132593f061ab31fba2413bff0563b7cd

[TupleTechnologies]

What's the latest update on this feature request. It's much needed as Bulma Tiles doesn't have the same way of laying our card columns with variable height, they do, but they are generated from Top to Bottom instead of Left to Right. Using Columns, the height is not variable and they all start on the same row height.

Would want a masonry layout (left to right) from Bulma. Can this happen?

[majkimajki]

Any way around for now, without it being a built in feature?

[Tuurlijk]

I may try this solution: https://codepen.io/qq7886/pen/MypEvw

Any way around for now, without it being a built in feature?

[Tuurlijk]

This works well
HTML

<div class="masonry">
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/200/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/400/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/300/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/500/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/400/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/300/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/800/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/600/">
            </figure>
        </div>
    </div>
</div>

SASS

.masonry
  column-count: 3
  margin: $gap
  column-gap: $gap

  .item
    margin: 0 0 $gap

+mobile
  .masonry
    column-count: 1

+tablet
  .masonry
    column-count: 2

+desktop
  .masonry
    column-count: 3

+widescreen
  .masonry
    column-count: 3

[empz]

This works well
HTML

<div class="masonry">
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/200/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/400/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/300/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/500/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/400/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/300/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/800/">
            </figure>
        </div>
    </div>
    <div class="card item">
        <div class="card-image">
            <figure class="image">
                <img src="https://lorempixel.com/400/600/">
            </figure>
        </div>
    </div>
</div>

SASS

.masonry
  column-count: 3
  margin: $gap
  column-gap: $gap

  .item
    margin: 0 0 $gap

+mobile
  .masonry
    column-count: 1

+tablet
  .masonry
    column-count: 2

+desktop
  .masonry
    column-count: 3

+widescreen
  .masonry
    column-count: 3

This doesn't really do what it's being asked here. Items are being layout vertically instead of horizontally, which is what we're trying to achieve here.