Vuetify v-card fit like a puzzle (Masonry layout)

Question

I have a page with 6 or more v-card.

Is there a way to fit them like a puzzle? I would like to remove white space between small v-card on first and second line.

Now is like this:

user_9291557 · Answer

No way (Yet) to solve this by Vuetify API. Related Github Feature Req:

[Feature Request] Masonry Layout #4091

Solution by Masonry.js

Use Javascript plugin. For example masonry.js.

Codepen Demo: https://codepen.io/ezra_siton/pen/gOpZqKr

Masonry.js & vuetify grid - Code snippet








  
    
      
        
          
            Card 1
            
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham. One of three columns
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              
          
        
        
        
          
            Card 2
            
              One The standard chunk of Lorem Ipsum used since the 1500s is 
              
          
        
        
        
          
            Card 3
            
              The chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              
          
        
        
        
          
            Card 4
            
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.

How to (Less than 1 min)

Step 1/3: CDN before body

Link directly to Masonry files on unpkg.

-or- Install with npm: npm install masonry-layout and use import import Masonry from 'masonry-layout'

Step 2/3: HTML - Set container element

Masonry works on a container grid element with a group of child items.

Add a class (or id) to your flexbox grid (Set as container element). masonry in this example (Use any name you want).


  
   
..rest of the code

Step 3/3: Initialize with vanilla js

new Masonry( elem, options )

3.1: Use .masonry as a container element argument.

3.2: Inside options object - set itemSelector to: itemSelector: "[class*='col-']"

[class*='col-']: Wildcard selector (Select any class Contains col. For example: .col-6 -or- .col-md-2 ==> DRY // Clean solution)

I load the script inside vue mounted() lifecycle hook (After the components added to the DOM).

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  mounted: function () {
      // Code that will run only after the
      // entire view has been rendered
      var msnry = new Masonry( '.masonry', {
        // options
        itemSelector: "[class*='col-']",
      });
  }
})

Docs:

masonry.js docs: https://masonry.desandro.com/
Vuetify grid systems docs: https://vuetifyjs.com/en/components/grids/

Solution by custom CSS

One more option is to use flexbox/Grid and Custom CSS, in my opinion, this is too much code & ideas for such a simple task. Related article:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

user_13182435 · Answer

If you are using VueJs and Vuetify then try to use vue.js masonry. With vue-masony, all you need to do is v-row and v-col instead of div.

...

user_15586987 · Answer

I found a simple solution (in this blog) with anything else than CSS. The same blog gives more examples of different grids and also some examples to make things prettier with JS.

The easiest way is to define a grid of columns the way you want. For example, I want on my proyect a 3 column grid about 400px each.

So we define a class masonry-with-columns, we put all the properties we want (margin, padding, column-gap, row-gap, etc)

.masonry-with-columns {
    columns: 3 400px;
    column-gap: 10px;
    max-width: 100%;
}

Each child must have 2 properties

.masonry-with-columns div {
    display: inline-block;
    width: 100%;
}

inline-block: prevents objects from being cut
width: 100%: When you do not put this property, at the time of loading it is displayed with a reduced width and then it expands, to avoid that, we must define a width

Example


import NoticeCard from '@/components/common/Notices/NoticeCard';
export default {
    data() {
        return {
            notices: []
        }
    },
    components:{
        NoticeCard
    },
    methods: {
        getNotices() {
            axiosRequest.get('/get-cards').then((response) => {
                if ( response.status === 200 )
                    this.notices = response.data[0];
            }).catch(e => axiosResponseErrorHandler(this, e));
        },
    }
}

Comments

Notices are filled with a server response
NoticeCard is your card