Simple and Flexible Vue.js component for grid layout

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

vue-grd

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

Install

source-shell
npm install --save vue-grd

Usage

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

text-html-basic
<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.

source-js
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%

Github

1000ch/vue-grd

Further reading:

Vue.js + Vuelidate - Form Validation Example
https://morioh.com/p/3f6b5bc40eed

A vue component that allows your images to open in full size.
https://morioh.com/p/d18c3bb25dea

A Tailwind CSS Component Library for Vue.js
https://morioh.com/p/e0a003e3b18a

Suggest:

JavaScript Programming Tutorial Full Course for Beginners

Learn JavaScript - Become a Zero to Hero

Top 10 JavaScript Questions

E-Commerce JavaScript Tutorial - Shopping Cart from Scratch

Javascript Project Tutorial: Budget App

What Can We Learn With JavaScript Fatigue