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
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>
You can also download and import it manually
<script src="/vue-grid-responsive/dist/vue-grid-reponsive.min.js"></script>
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);
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
Component props:
Prop | Default | Type | Description |
---|---|---|---|
gutter | - | number | Grid spacing in the container |
columns | 12 | number | Setting columns count in the container |
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 |
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 |
Download stats for this NPM package
Vue Grid Responsive is open source software licensed as MIT.