https://github.com/e-oj/vue-magic-grid

🧙‍♂️🔌 Responsive Magic Grid for Vue
https://github.com/e-oj/vue-magic-grid

grid masonry vue

Last synced: about 2 months ago
JSON representation

🧙‍♂️🔌 Responsive Magic Grid for Vue

• Host: GitHub
• URL: https://github.com/e-oj/vue-magic-grid
• Owner: e-oj
• License: unlicense
• Created: 2018-11-12T16:39:51.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:21:57.000Z (almost 3 years ago)
• Last Synced: 2025-08-09T18:45:57.949Z (about 2 months ago)
• Topics: grid, masonry, vue
• Language: JavaScript
• Homepage: https://npmjs.com/package/vue-magic-grid
• Size: 2.14 MB
• Stars: 178
• Watchers: 2
• Forks: 16
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue-Magic-Grid

[![GitHub forks](https://img.shields.io/github/forks/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/network)

[![GitHub stars](https://img.shields.io/github/stars/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/stargazers)

[![GitHub issues](https://img.shields.io/github/issues/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/issues)

[![GitHub license](https://img.shields.io/github/license/imlinus/Vue-Magic-Grid.svg)](https://github.com/imlinus/Vue-Magic-Grid/blob/master/LICENSE)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

This is a Vue.js port of @[e-oj's](https://github.com/e-oj) [Magic Grid](https://github.com/e-oj/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

```js

$ npm i -S vue-magic-grid

```

```js

import MagicGrid from 'vue-magic-grid'

Vue.use(MagicGrid)

```

### Setup with Nuxt

Create a magicgrid.js in your plugin folder

```js

import Vue from 'vue'

import MagicGrid from 'vue-magic-grid'

Vue.use(MagicGrid)

```

Add the plugin in your nuxt.config.js file

```js

plugins: [

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

]

```

### Use

```html

  

```

### 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](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)

Cheers,

ImLinus