Vue.js masonry component powered by CSS

vue-masonry-css

vue-masonry-css Is a Vue Component with a simple interface to order items into the desired columns at specified breakpoints. With minimal CSS this leads to a quick, reliable solution that also has great browser support along with fast rendering performance.

Features

  • Responsive
  • IE 9+ CSS Support
  • Dependency & jQuery free
  • CSS powered (Fast loading & Performant)
  • Gutters

Live Demo

Example

Install

Add vue-masonry-css to your project by running

yarn add vue-masonry-css

or via script

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-masonry-css"></script>

Usage

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

Vue.use(VueMasonry)

In your templates

<masonry
  :cols="3"
  :gutter="30"
  >
  <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
</masonry>

Note: It does not work with elements of different widths.

Resposive Breakpoints

Different columns and gutter sizes can be specified by passing an object containing key's of the window widths and their values representing the number of columns or gutter size. To have a fallback value, use the default key.

note: The cols= attribute needs to use Vue's bind method to evaluate objects. Instead of cols="" use either v-bind:cols="{ 700: 3 }" or the shorthand :cols="{ 700: 3 }".

That's all! If you have any suggestions or issues visit the code repository, here.