vue-grd
Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd.
Install
Usage
You can use <vue-grid>
and <vue-cell>
components after importing and registering VueGrid
and VueCell
.
You can also register them as global components.
<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% |