gridfy-vue

Dynamic Layout with CSS Grid on Vue

Generated using vue-cli-template-library.

Installation

npm install gridfy-vue

#

yarn add gridfy-vue

gridfy-vue can be used as a module in both CommonJS and ES modular environments.

When in non-modular environment, gridfy-vue will register all the components to vue by itself.

ES6

//
// You can register a component manually
//
import { Grid } from 'gridfy-vue';
 
export default {
  ...
  components: {
    Grid
  },
  ...
};
 
//
// or register the whole module with vue
//
import Gridfy from 'gridfy-vue';
 
// Install this library
Vue.use(Gridfy);

CommonJS

//
// You can register a component manually
//
var Vue = require('vue');
var Gridfy = require('gridfy-vue');
 
var YourComponent = Vue.extend({
  ...
  components: {
    'grid': Gridfy.Grid
  },
  ...
});
 
//
// or register the whole module with vue
//
var Vue = require('vue');
var Gridfy = require('gridfy-vue');
 
// Install this library
Vue.use(Gridfy);

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/gridfy-vue/dist/gridfy-vue.min.js"></script>
<!-- Components are registered globally -->

After that, you can use it in your templates:

<!-- Static grid -->
<grid column="4">
  <div class="example">
    Column 1
  </div>
  <div class="example">
    Column 2
  </div>
  <div class="example">
    Column 2
  </div>
</grid>
 
<!-- Dynamic grid -->
<grid dynamic column="3">
  <div column="1" row="1" class="example">
    Column 1
  </div>
  <div column="1" row="2" class="example">
    Column 1
  </div>
  <div column="2" row="2" class="example">
    Column 2
  </div>
  <div column="3" row="3" class="example">
    Column 2
  </div>
</grid>
 
<!-- Auto grid -->
<grid column="3">
  <div :desktop="['1', '1']" :tablet="['2', '1']" class="example">
    Column 1
  </div>
  <div :desktop="['2', '2']" :tablet="['1', '2']" class="example">
    Column 2
  </div>
  <div :desktop="['3', '3']" :tablet="['3', '3']" class="example">
    Column 2
  </div>
</grid>
 
<!-- Stacked grid -->
<grid column="3">
  <div class="example">
    <grid column="2">
      <div class="example">
        Column 1
      </div>
      <div class="example">
        Column 2
      </div>
    </grid>
  </div>
  <div class="example">
    Column 2
  </div>
  <div class="example">
    <grid column="2">
      <div class="example">
        Column 1
      </div>
      <div class="example">
        Column 2
      </div>
    </grid>
  </div>
</grid>

Changelog

See the GitHub release history.

Contributing

See CONTRIBUTING.md.