simple-grid
a simple grid layout(Vue Component)
Installation
use npm
$ npm i simple-xgrid --save
Vue
use script
<!-- import Vue.js --><!-- import simple-grid.js -->
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
span:4 span:4 span:4 span:4 span:4 span:4 gutter:30 gutter:30 gutter:30 offset:4 span:4 col push:4 Response-Col Response-Col Response-Col Response-Col Response-Col Response-Col flex flex flex flex flex flex flex flex order:2 order:1 order:4 order:5 order:3 response-order-1 Response-order-2