Masonry ignores Flexbox Grid

[SvenC56]

Hi I have a small problem with the grid elements width. I use Vuetify (with Nuxt.js) which provides a flexbox based grid system https://vuetifyjs.com/en/layout/grid.

      <v-container grid-list-md>
        <v-layout row v-masonry transition-duration="0.5s" item-selector=".flex" column-width="#grid-sizer">
          <v-flex sm12 md6 lg4 xl3 id="grid-sizer"></v-flex>
          <component :key="dashboardItem.id" v-for="(dashboardItem,index) in dashboardItems" :is="dashboardItem.type" :connector="dashboardItem.connector"
            :type="dashboardItem.type" :configuration="dashboardItem.configuration" :id="dashboardItem.id" :index="index"></component>
        </v-layout>
      </v-container>
    </no-ssr>

As soon I inject the masonry grid all of the items use their minimal width and ignore the provided grid.

If I set a px based width it works again as expected.

Is there any solution for this?

Thank you.

EDIT: Layout of an example component:

<template>
  <v-flex v-masonry-tile xs12 md6 lg4 xl3>
    <v-card>
   .... Content
    </v-card>
  </v-flex>
</template>

[shershen08]

You might want to check those: https://github.com/desandro/masonry/issues/1053 https://github.com/paulcollett/vue-masonry-css

[shershen08]

closing due to inactivity