npm i vue-grid-responsive
// OR
yarn add vue-grid-responsive
<script src="https://unpkg.com/vue-grid-responsive"></script>
You can also download and import it manually
<script src="/vue-grid-responsive/dist/vue-grid-reponsive.min.js"></script>
import Vue from 'vue';
import { Row, Column } from 'vue-grid-responsive';
Vue.component('row', Row);
Vue.component('column', Column);
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>
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 |
Download stats for this NPM package
Vue Grid Responsive is open source software licensed as MIT.