Best way to accomplish masonry layout of divs (v1.0 beta 8)?

[ssuess]

Hi, I have a number of divs of varying heights (but identical widths) in a prefs page I am building, and I would like to have the layout be a masonry type so that I am not leaving blank space. Is there anything within Quasar that would help with this, or do I need to build the layout with css and js on my own? Thanks!

[ssuess]

For now I found a lightweight, easy to use component to accomplish this: vue-masonry-css (https://paulcollett.github.io/vue-masonry-css/demo/).

[gkentsidis]

Hi, I have the same issue. Can you please tell how did you implemented that component and used it? I followed the instructions provided with no success.

[ssuess]

I actually ended up going with packery instead, it was more adapted to my needs. I used this component: https://github.com/t-k-f/vue-packery-plugin

[gvorster]

@gkentsidis said in Best way to accomplish masonry layout of divs (v1.0 beta 8)?:

Hi, I have the same issue. Can you please tell how did you implemented that component and used it? I followed the instructions provided with no success.

I tried this and it looks nice.
Small example using Quasar 1.14 and Vue composition api.

yarn add vue-masonry-css
quasar new b vue-masonry

Add vue-masonry boot file to quasar.conf.js

import Vue from 'vue'
import VueMasonry from 'vue-masonry-css'

Vue.use(VueMasonry);

Small test page wirth random length text:

<template>
  <q-page padding>
    <masonry :cols="3" :gutter="10">
      <div v-for="(item, index) in items" :key="index" class='card q-ma-md'>
        <span>{{item}}</span>
      </div>
    </masonry>
  </q-page>
</template>

<script>
import { ref } from "@vue/composition-api";

export default {
  // name: 'PageName',

  setup() {
    let items = ref([])

    for (let i=0; i<=25; i++) {
      let s = ""

      for (let n=1; n <= Math.floor(Math.random() * 15); n++) {
        s += "xxxxxx xxxxxx xxxxxxxxxxxxx xxxxxxxx "
      }

      items.value.push(s)
    }

    return { items }
  }
};
</script>

<style lang='stylus'>
.card
  border: 1px solid black;


</style>

Output

Using it in my little private code snippet library.