Vuetify: [Feature Request] Masonry Layout

[navaneethsr]

Problem to solve

Empty space is displayed in grid layout if card is expanded.
Increase text in the first card, the height of other cards automatically changes. Expected behaviour is to change the height of the respective card only.
https://codepen.io/navaneethsr/pen/KRNKqr

Proposed solution

Implement masonry layout to utilize the empty spaces.

[johnleider]

This is already underway by @maurop123 and part of the upcoming Front-End pack.

[navaneethsr]

@johnleider thanks for adding it as a feature. Can you please tell me when can I expect this feature in vuetify?

[johnleider]

v1.2

[annymosse]

@johnleider @maurop123 :+1: thanks ,very excited to use this feautre

[creativenoobie]

@johnleider Can you please update us when it's coming?

[johnleider]

Can't have multiple milestones, but I anticipate starting work on this after v1.3. We decided to do the front-end pack over multiple minors as it was difficult to coordinate releasing so many at once.

[wouterfovel]

Currently we're using vue-masonry and vue-masonry-css, however got some really annoying issues (broken reactivity and others) with them.
Is there an eta for having masonry support in vuetify?

[kevinmarrec]

@johnleider Any update ? It doesn't seem to be on the updated Roadmap 😱

[johnleider]

Will probably be in 2.0 unless the developer championing that comes back sooner.

[Alleyfield]

+1 interest from here into this as well

[BugChang]

I have encountered this problem now.
Can I use it in version 1.5.14?
Why is my code not working?

[valentingavran]

It would be a great feature to implement all list types showed in the Image lists material design guidelines. Currently there's no easy way to implement e.g. the Quilted layout.

[avanishp2]

any update on this feature? i am waiting as well :)

[franzvezuli]

It would be a great feature to implement all list types showed in the Image lists material design guidelines. Currently there's no easy way to implement e.g. the Quilted layout.

Nice find! Didn't even know about quilted, looks cool.

[annymosse]

any updates | news | opinions | plan | shadow :thinking: "some steps" ?

[danieltxok]

+1 to this!

[azimbialiev]

Any updates?

[Ezra-Siton-UIX]

Very clean solution

masonry.js (Free MIT license) Plugin Custom code solution (Works like magic):
DEMO: https://codepen.io/ezra_siton/pen/gOpZqKr?editors=1000

I use wildcard selector so the masonry works very well with vuetify grids (Use any layout combination you want - Zero extra configs). One extra class - 2 lines of code --> DONE :)

<script>
  // element argument can be a selector string
  //   for an individual element
  var msnry = new Masonry( '.masonry', {
    // options
    itemSelector: "[class*='col-']",
  });
</script>

[xiaomaiyun]

Very clean solution

masonry.js (Free MIT license) Plugin Custom code solution (Works like magic):
DEMO: https://codepen.io/ezra_siton/pen/gOpZqKr?editors=1000

I use wildcard selector so the masonry works very well with vuetify grids (Use any layout combination you want - Zero extra configs). One extra class - 2 lines of code --> DONE :)

<script>
  // element argument can be a selector string
  //   for an individual element
  var msnry = new Masonry( '.masonry', {
    // options
    itemSelector: "[class*='col-']",
  });
</script>

I try to change your code from to component, it will not work. Questions are as follows:

1. When I define a picture list in data, all pictures are superimposed together. demo: https://codepen.io/xiaomaiyun/pen/RwWaJRQ

1. When I request data from the server through axios, there is a blank area between the upper and lower pictures, the effect is the same as that without Masonry. demo: https://codepen.io/xiaomaiyun/pen/JjYXBya

2. The lazy-src in does not work. In other words, lazy loading does not take effect.
   Is there a solution or other implementation methods?

[xiaomaiyun]

Problem to solve

Empty space is displayed in grid layout if card is expanded.
Increase text in the first card, the height of other cards automatically changes. Expected behaviour is to change the height of the respective card only.
https://codepen.io/navaneethsr/pen/KRNKqr

Proposed solution

Implement masonry layout to utilize the empty spaces.
I try to change your code from to component, it will not work. Questions are as follows:

1. When I define a picture list in the data, there is a blank area between the upper and lower pictures, the effect is the same as not using Masonry. demo: https://codepen.io/xiaomaiyun/pen/OJyNwaN

1. The lazy-src in does not work. In other words, lazy loading does not take effect.
   Is there a solution or other implementation methods?

[Ezra-Siton-UIX]

My example is "hello world" example (Not related to SPA and AXIOS).

@xiaomaiyun - Component - you talk about vue-CLI? Single file component.
In my code, it's better to put inside mounted - or maybe try this plugin (I don't know if this is an official version of masonry.js).
https://www.npmjs.com/package/vue-masonry

lazy - you'll need to trigger layout after images have loaded (I never try this with vuetify & masonry.js):
https://github.com/desandro/masonry/issues/1042

SUM: all of your bugs related to this issue: "you'll need to trigger layout after images have loaded" (Resize the window and then the layout will work fine).

[xiaomaiyun]

My example is "hello world" example (Not related to SPA and AXIOS).

@xiaomaiyun - Component - you talk about vue-CLI? Single file component.
In my code, it's better to put inside mounted - or maybe try this plugin (I don't know if this is an official version of masonry.js).
https://www.npmjs.com/package/vue-masonry

lazy - you'll need to trigger layout after images have loaded (I never try this with vuetify & masonry.js):
desandro/masonry#1042

One more idea - try to install the plugin related to the component lifecycle.

SUM: all of your bugs related to this issue: "you'll need to trigger layout after images have loaded" (Resize the window and then the layout will work fine).

Okay thank you

[hackerESQ]

Would be really nice to have masonry built in to Vuetify. Is this still in the works? If not, I can try to pull together a PR (would be my first PR unrelated to docs). This seems like it might work.

[franzvezuli]

Would be really nice to have masonry built in to Vuetify. Is this still in the works? If not, I can try to pull together a PR (would be my first PR unrelated to docs). This seems like it might work.

@hackerESQ
I used that same article to implement a solution for one of my projects. I would just also read his follow up article -- Because he explains how his original one did "top-bottom" (which is more a waterfall) and not "left-right" masonry.

[hackerESQ]

@franzvezuli thanks for the tip. I'm struggling with col gutters. Any tips to make the gutters play nice?

[franzvezuli]

@franzvezuli thanks for the tip. I'm struggling with col gutters. Any tips to make the gutters play nice?

I think mine uses the top-down. Essentially this is the HTML:

<div class="masonry">
  <!-- cards in a loop -->
  <v-card class="card-brick" />
</div>

And CSS:

.masonry {
  margin: 0 auto 0 auto;
  column-gap: 1.3em;
  padding: 2px 5px 0px 5px;
}

With a few of these depending which sizes you want for responsive:

@media only screen and (min-width: 1600px) {
  .masonry {
    column-count: 5;
  }
}

But this part I had to add myself for mine to play nice:

.card-brick {
  display: inline-block;
  margin: 0 auto 2em auto;
  width: 100%;
}

[johnleider]

This is now a dedicated component in the Material Design specification: https://material.io/components/image-lists

Even though this issue precedes #11177, it focuses on the specification's component, so I'm going to close this in favor of it.

If you have any additional questions, please reach out to us in our Discord community.