vue-grd

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

Install

npm install --save vue-grd

Usage

You can use <vue-grid> and <vue-cell> components after importing and registering VueGrid and VueCell.

<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 components.

import Vue from 'vue';
import { VueGrid, VueCell } from 'vue-grd';

Vue.component('vue-grid', VueGrid);
Vue.component('vue-cell', VueCell);

<vue-grid> modifiers

| tag | description | |---|---| | HTMLElement name | Specify grid's tag name |

| align | description | |---|---| | top | Pull items to top | | middle | Pull items to middle | | bottom | Pull items to bottom | | stretch | Stretch items | | baseline | Pull items to baseline |

| justify | description | |---|---| | 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> modifiers

| tag | description | |---|---| | HTMLElement name | Specify cell's tag name |

| width | description | |---|---| | 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% |

License

MIT © Shogo Sensui