Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anthinkingcoder/simple-grid
grid layout,support flex
https://github.com/anthinkingcoder/simple-grid
Last synced: about 2 months ago
JSON representation
grid layout,support flex
- Host: GitHub
- URL: https://github.com/anthinkingcoder/simple-grid
- Owner: anthinkingcoder
- License: mit
- Created: 2018-07-12T11:12:46.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-08T09:06:40.000Z (almost 6 years ago)
- Last Synced: 2024-03-24T09:04:00.904Z (2 months ago)
- Language: Vue
- Homepage:
- Size: 820 KB
- Stars: 24
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (UI Layout / Tour)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (UI Layout / Tour)
- awesome-vue - simple-grid - Vue component for grid layout,support flex. (Components & Libraries / UI Layout)
- awesome-vue - simple-grid ★11 - Vue component for grid layout,support flex. (UI Layout / Tour)
README
# simple-grid
> a simple grid layout(Vue Component)
## Installation
use npm
```bash
$ npm i simple-xgrid --save
```
```js
import Grid from 'simple-xgrid'
import 'simple-xgrid/dist/simple-grid.css'
Vue.use(Grid)
```
use script
```html
```
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](https://jsfiddle.net/anthinkingcoder/04phqm6L)
```html
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
```
## result
