πŸ§™β€β™‚οΈπŸ”Œ Responsive Magic Grid for Vue
Clone or download
Latest commit a1527f4 Jan 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Create index.js Nov 20, 2018
test Update grid.vue Nov 28, 2018
.gitignore updates, 0.0.2 Nov 19, 2018
LICENSE Initial commit Nov 12, 2018
README.md Update README.md Jan 2, 2019
package.json v0.0.3 Nov 20, 2018

README.md

Vue-Magic-Grid

GitHub forks GitHub stars GitHub issues GitHub license JavaScript Style Guide

This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example.

If you use images, make sure they have a set height, otherwise the grid will calculate weirdly.

Setup

Install & Register the component

$ npm i -S vue-magic-grid
import MagicGrid from 'vue-magic-grid'

Vue.use(MagicGrid)

Use

<magic-grid>
  <card
    v-for="(post, i) in posts"
    :key="i"
    :title="post.title"
    :body="post.body" />
</magic-grid>

Props

Prop Default Comment
wrapper wrapper Wrapper class
gap 32 Gap between elements
maxCols 5 Max number of colums
maxColWidth 280 Max width of columns
animate false Animate item positioning

js-standard-style

Cheers, ImLinus