Dynamic Masonry Layout For Vue – flex-waterfall


flex-waterfall is a Vue.js layout library to generate a dynamic, fluid, Masonry style grid layout for modern web applications.

How to use it:

1. Import and register the component.

import VueFlexWaterfall from 'vue-flex-waterfall';
export default {
  components: {

2. Add the flex-waterfall component to the template.

  style="align-content: center;"
    v-for="(item, index) in items"
    :style="{ height: `${item.h}px` }"
    Item here

3. Default props to config the layout.

col: {
  type: Number,
  default: 1,
colSpacing: {
  type: [Number, String],
  default: 0,
breakAt: {
  type: Object,
  default: () => ({}),
breakByContainer: {
  type: Boolean,
  default: false,


Dynamic Masonry Layout For Vue - flex-waterfall

Download Details:

Author: Tsuk1ko

Live Demo: https://tsuk1ko.github.io/vue-flex-waterfall/

Download Link: https://github.com/Tsuk1ko/vue-flex-waterfall/archive/master.zip

Official Website: https://github.com/Tsuk1ko/vue-flex-waterfall

Install & Download:

# Yarn
$ yarn add vue-flex-waterfall

$ npm install vue-flex-waterfall --save

You Might Be Interested In:

Add Comment