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.
Install & Register the component
$ npm i -S vue-magic-grid
import MagicGrid from 'vue-magic-grid'
Vue.use(MagicGrid)
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'}
]
<magic-grid>
<card
v-for="(post, i) in posts"
:key="i"
:title="post.title"
:body="post.body" />
</magic-grid>
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 |
Cheers, ImLinus