Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd.
source-shell
npm install --save vue-grd
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>
modifierstag |
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>
modifierstag |
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% |
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
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch