https://github.com/1000ch/vue-grd

Simple, Light-weight and Flexible Vue.js component for grid layout.
https://github.com/1000ch/vue-grd

framework grid grid-layout vue

Last synced: 21 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/1000ch/vue-grd
• Owner: 1000ch
• Created: 2018-03-17T04:03:33.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T01:32:57.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T23:51:24.289Z (about 1 month ago)
• Topics: framework, grid, grid-layout, vue
• Language: HTML
• Homepage: https://1000ch.github.io/vue-grd/
• Size: 1.59 MB
• Stars: 43
• Watchers: 2
• Forks: 7
• Open Issues: 8
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# vue-grd ![test](https://github.com/1000ch/vue-grd/workflows/test/badge.svg?branch=main)

> Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of [grd](https://github.com/1000ch/grd).

## Install

```sh

npm install --save vue-grd

```

## Usage

You can use `` and `` components after importing and registering `VueGrid` and `VueCell`.

```html

  

    fill

    3of12

    3of12

  

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

export default {

  components: {

    VueGrid,

    VueCell

  }

};

```

You can also register them as global components.

```javascript

import Vue from 'vue';

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

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

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

```

### `` modifiers

| `tag` | description |

|---|---|

| [HTMLElement name](https://html.spec.whatwg.org/multipage/#toc-semantics) | 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 |

### `` modifiers

| `tag` | description |

|---|---|

| [HTMLElement name](https://html.spec.whatwg.org/multipage/#toc-semantics) | 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](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)