simple-grid

a simple grid layout(Vue Component)

Installation

use npm

$ npm i simple-xgrid --save

import Grid from 'simple-xgrid'
import  'simple-xgrid/dist/simple-grid.css'
Vue.use(Grid)

use script

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import simple-grid.js -->
<link href="dist/simple-grid.css">
<script src="dist/simple-grid.js"></script>

due to conflict,use script, you need change to 。

Row Component

row props

| param | description | type | default | | :-: | :-: | :-: | :-: | | gutter | Grid spacing in pixels, split equally left and right | Number | 0 | | type | Layout mode. Can optionally make use of flex in a modern browser. | String | | | align | Vertical alignment of flex layout. You can choose between top, middle, bottom. | String | | | justify | Horizontal arrangement of flex layout. You can choose between start, end, center, space-around, space-between. | String | | | type | Layout mode. Can optionally make use of flex in a modern browser. | String | |

Col Component

col props

| param | description | type | default | | :-: | :-: | :-: | :-: | | span | Column span. Value can be between 1 and 24. | Number | | | order | Grid order when using flex layout. if auto responsive, value can only 1-24. | Number | | | offset | Number of cells to the left of grid spacing. No cells can be inside the grid spacing. | Number | | | push | Number of cells to move to the right | Number | | | pull | Number of cells to move to the left | Number | | | xs | <768px can be a span value or an object containing props | Number or Object | | | sm | >768px can be a span value or an object containing props | Number or Object | | | md | ≥992px can be a span value or an object containing props | Number or Object | | | lg | ≥1200px can be a span value or an object containing props | Number or Object | |

examples

see live demo

    <Row>
      <Col :span="4" class="demo-col">span:4</Col>
      <Col :span="4" class="demo-col">span:4</Col>
      <Col :span="4" class="demo-col">span:4</Col>
      <Col :span="4" class="demo-col">span:4</Col>
      <Col :span="4" class="demo-col">span:4</Col>
      <Col :span="4" class="demo-col">span:4</Col>
    </Row>
    <br>
    <Row :gutter="30">
      <Col :span="8">
        <div class="demo-col">gutter:30</div>
      </Col>
      <Col :span="8">
      <div class="demo-col">gutter:30</div>
      </Col>
      <Col :span="8">
      <div class="demo-col">gutter:30</div>
      </Col>
    </Row>
    <br>
    <Row>
      <Col :span="4" :offset="4" class="demo-col">offset:4</Col>
      <Col :span="4" class="demo-col">span:4</Col>
    </Row>
    <br>
    <Row>
      <Col :span="4"  class="demo-col">col</Col>
      <Col :span="8" :push="4" class="demo-col">push:4</Col>
    </Row>
    <br>
    <Row>
      <Col :xs="2" :sm="4" :md="6" :lg="8" class="demo-col">Response-Col</Col>
      <Col :xs="20" :sm="16" :md="12" :lg="8" class="demo-col">Response-Col</Col>
      <Col :xs="2" :sm="4" :md="6" :lg="8" class="demo-col">Response-Col</Col>
    </Row>
    <br>
    <Row>
      <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="demo-col">Response-Col</Col>
      <Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="demo-col">Response-Col</Col>
      <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="demo-col">Response-Col</Col>
    </Row>
    <br>
    <Row  type="flex" justify="space-between">
      <Col :span="4" class="demo-col">
          flex
      </Col>
      <Col :span="4" class="demo-col">
      flex
      </Col>
    </Row>
    <br>
    <Row  type="flex" justify="center" align="middle">
      <Col :span="4" class="demo-col">
      flex
      </Col>
      <Col :span="4" class="demo-col demo-col-large">
      flex
      </Col>
    </Row>
    <br>
    <Row  type="flex" justify="center" align="top">
      <Col :span="4" class="demo-col">
      flex
      </Col>
      <Col :span="4" class="demo-col demo-col-large">
      flex
      </Col>
    </Row>
    <br>
    <Row  type="flex" justify="center" align="bottom">
      <Col :span="4" class="demo-col">
      flex
      </Col>
      <Col :span="4" class="demo-col demo-col-large">
      flex
      </Col>
    </Row>
    <br>
    <Row  type="flex">
      <Col :span="4" class="demo-col" :order="2">
      order:2
      </Col>
      <Col :span="4" class="demo-col" :order="1">
      order:1
      </Col>
      <Col :span="4" class="demo-col" :order="4">
      order:4
      </Col>
      <Col :span="4" class="demo-col" :order="5">
      order:5
      </Col>
      <Col :span="4" class="demo-col" :order="3">
      order:3
      </Col>
    </Row>
     <Row type="flex">
          <Col :xs="{ span: 8,order:1 }" :sm="{ span: 8,order:1 }" :md="{ span: 8,order:2 }" :lg="{ span: 8,order:2 }" class="demo-col">response-order-1</Col>
          <Col :xs="{ span: 8,order:2 }" :sm="{ span: 8,order:2 }" :md="{ span: 8,order:1 }" :lg="{ span: 8,order:1 }" class="demo-col">Response-order-2</Col>
      </Row>

result