Skip to content

e-oj/vue-magic-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

18 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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)

Setup with Nuxt

Create a magicgrid.js in your plugin folder

import Vue from 'vue'
import MagicGrid from 'vue-magic-grid'

Vue.use(MagicGrid)

Add the plugin in your nuxt.config.js file

plugins: [
  {src: '~/plugins/magicgrid.js'}
]

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

About

πŸ§™β€β™‚οΈπŸ”Œ Responsive Magic Grid for Vue

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •