Vue Grid Responsive
Responsive grid system based on Bootstrap for Vue.
Installation
NPM
vue 2.0
npm i vue-grid-responsive
// OR
yarn add vue-grid-responsive
vue 3.0
npm i vue-grid-responsive@next
// OR
yarn add vue-grid-responsive@next
CDN
vue 2.0
<script src="https://unpkg.com/vue-grid-responsive"></script>vue 3.0
<script src="https://unpkg.com/vue-grid-responsive@next"></script>Manual
You can also download and import it manually
<script src="/vue-grid-responsive/dist/vue-grid-reponsive.min.js"></script>Module import
vue 2.0
import Vue from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';
Vue.component('row', Row);
Vue.component('column', Column);
Vue.component('hidden', Hidden);vue 3.0
import { createApp } from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';
const app = createApp(App);
app.component('row', Row);
app.component('column', Column);
app.component('hidden', Hidden);Examples
An example of how to use the library:
<template>
<row container :gutter="12">
<column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
<column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
<column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
<column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
</row>
</template>An example how to use offset in addition with a columns:
<template>
<row container :gutter="12">
<column :md="8" :mdOffset="2" :lg="6" :lgOffset="3"> </column>
</row>
</template>Using the hidden component:
<template>
<div>
<hidden :xs="true"> hidden xs </hidden>
<hidden :md="true"> hidden md </hidden>
<hidden :xl="true"> hidden xl </hidden>
</div>
</template>Demo Link
Local demo:
git clone https://github.com/andrelmlins/vue-grid-responsive.git
cd vue-grid-responsive
npm && npm run dev
Properties
Component props:
Row Component props
| Prop | Default | Type | Description |
|---|---|---|---|
| gutter | - | number | Grid spacing in the container |
| columns | 12 | number | Setting columns count in the container |
Column Component props
Basic Size
| Prop | Default | Type | Description |
|---|---|---|---|
| xs | - | number | Size in extra small screen |
| sm | - | number | Size in small screen |
| md | - | number | Size in medium screen |
| lg | - | number | Size in large screen |
| xl | - | number | Size in extra large screen |
| order | - | number | Order the columns |
Offset
| Prop | Default | Type | Description |
|---|---|---|---|
| xsOffset | - | number | Offset in extra small screen |
| smOffset | - | number | Offset in small screen |
| mdOffset | - | number | Offset in medium screen |
| lgOffset | - | number | Offset in large screen |
| xlOffset | - | number | Offset in extra large screen |
Hidden Component props
| Prop | Default | Type | Description |
|---|---|---|---|
| xs | - | boolean | Hidden in extra small size |
| sm | - | boolean | Hidden in small size |
| md | - | boolean | Hidden in medium size |
| lg | - | boolean | Hidden in large size |
| xl | - | boolean | Hidden in extra large size |
NPM Statistics
Download stats for this NPM package
License
Vue Grid Responsive is open source software licensed as MIT.