Simple, Light-weight and Flexible Vue.js component for grid layout

Just published 1000ch/vue-grd, Vue.js component which provides flexible grid layout system with simple usage.

How to use?

You can install via npm.

npm install --save vue-grd

After importing and registering as component, you can use <vue-grid> and <vue-cell>.

<template>
  <vue-grid align="stretch" justify="start">
    <vue-cell width="fill">fill</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
  </vue-grid>
</template>

<script>
import { VueGrid, VueCell } from 'vue-grd';

export default {
  components: {
    VueGrid,
    VueCell
  }
};
</script>

You can also register them as global component.

import Vue from 'vue';
import VueGrd from 'vue-grd';

Vue.use(VueGrd);
// or
Vue.component('vue-grid', VueGrd.VueGrid);
Vue.component('vue-cell', VueGrd.VueCell);

If you don't use npm, you can load via jsDelivr.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-grd@1.1.0/dist/vue-grd.js"></script>
<script>Vue.use(VueGrd);</script>

Configure

They have some properties to align and justify set width.

<vue-grid align>

• top: Pull items to top
• middle: Pull items to middle
• bottom: Pull items to bottom
• stretch: Stretch items
• baseline: Pull items to baseline

<vue-grid justify>

• start: Layout items to start
• center: Layout items to center
• end: Layout items to end
• between: Add spaces between items
• around: Add spaces around items

<vue-cell width>

• fill: Set item width to left
• 1of12: Set item width to 8.3%
• 2of12: Set item width to 16.7%
• 3of12: Set item width to 25%
• 4of12: Set item width to 33%
• 5of12: Set item width to 41.7%
• 6of12: Set item width to 50%
• 7of12: Set item width to 58.3%
• 8of12: Set item width to 66.7%
• 9of12: Set item width to 75%
• 10of12: Set item width to 83.3%
• 11of12: Set item width to 91.7%
• 12of12: Set item width to 100%

Live Demo

You can try it from here.