vue-grid-responsive

Responsive grid system based on Bootstrap for Vue.

Step 1: 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>

Step 2: 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

NPM

License

Vue Grid Responsive is open source software licensed as MIT.

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.