https://github.com/lbwa/grid-style
:straight_ruler:Grid layout, implemented by flex-box.
https://github.com/lbwa/grid-style
flex-layout flexbox flexbox-grid grid grid-layout grid-system sass sass-library
Last synced: 5 months ago
JSON representation
:straight_ruler:Grid layout, implemented by flex-box.
- Host: GitHub
- URL: https://github.com/lbwa/grid-style
- Owner: lbwa
- Created: 2018-07-29T15:11:45.000Z (almost 8 years ago)
- Default Branch: dev
- Last Pushed: 2018-09-08T07:16:55.000Z (almost 8 years ago)
- Last Synced: 2025-06-20T21:49:01.033Z (12 months ago)
- Topics: flex-layout, flexbox, flexbox-grid, grid, grid-layout, grid-system, sass, sass-library
- Language: CSS
- Homepage: https://lbwa.github.io/grid-style/
- Size: 135 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# grid-style [](https://www.npmjs.com/package/grid-style) [](https://travis-ci.org/lbwa/grid-style)
> CSS grid layout which is based on 12 preset columns layout is implemented by flex box.
👉Browse [online]
[online]:https://lbwa.github.io/grid-style/
## Installing
```bash
# npm
npm i grid-style --save
# yarn
yarn add grid-style
```
```html
```
## Usage
```js
// import css file to js file
import 'grid-style/dist/index.min.css'
// or
import 'grid-style/dist/index.css'
// a sass alternative to css file
import 'grid-style/layout/index.sass'
```
```css
/* import css file to your own css file */
@import 'grid-style';
/* or */
/* import sass file to your own sass file */
@import 'grid-style/layout/index.sass'
```
## Basis
| selector | target | description |
| -------- | ------ | ----------- |
| .grid | container | define box container |
| .grid.no-wrap | container | disallow wrap item |
| .grid.col | container | set flex direction to column |
| .grid.cr | container | set flex direction to column-reverse |
| .grid.row | container | set flex direction to row |
| .grid.rr | container | set flex direction to row-reverse |
| .grid-cell | item | define default flex grow factor value of a item |
| .grid-cell-1 ~ .grid-cell-12 | item | define single item width （based on `1/12 container width`） |
```html
```
## Alignment
| selector | target | description |
| -------- | ------ | ----------- |
| .grid-top | container | define alignment per ***row*** to top-aligned |
| .grid-center | container | define alignment per ***row*** to vertically-centered |
| .grid-bottom | container | define alignment per ***row*** to bottom-aligned |
| .grid-jc-start | container | define alignment all ***item*** to left-aligned |
| .grid-jc-end | container | define alignment all ***item*** to right-aligned |
| .grid-jc-center | container | define alignment all ***item*** to horizontally-centered |
| .grid-jc-between | container | define alignment all ***item*** to space-between-aligned |
| .grid-jc-around | container | define alignment all ***item*** to space-around-aligned |
| .grid-cell-top | item | define alignment per ***item*** to top-aligned |
| .grid-cell-center | item | define alignment per ***item*** to vertically-centered |
| .grid-cell-bottom | item | define alignment per ***item*** to bottom-aligned |
***Notice***: You have to make sure all item total width less than container width if you are using `.grid-jc-` properties. You can use `.grid-cell-1 ~ .grid-cell-12` to limit item width.
[Online alignment demo][demo-alignment]
```html
```
[demo-alignment]:https://jsfiddle.net/h946ot70/12/
## Gutters
| selector | target | description |
| -------- | ------ | ----------- |
| .grid[grid-gutters="1"] ~ .grid[grid-gutters="10"] | container | define item gutter （based on `.5em`） |
## Offset
| selector | target | description |
| -------- | ------ | ----------- |
| .offset-1 ~ .offset-12 | item | define item offset （based on `1/12 container width`）|
[Online offset demo][demo-offset]
```html
```
[demo-offset]:https://jsfiddle.net/h946ot70/36/
## Response
***Notice***: This section define properties to ***all*** item （`.grid-cell` * n） from ***one*** container（`.grid` * 1）.
| selector | target | description |
| -------- | ------ | ----------- |
| .grid-full | container | define all item (`100%` container width) width from same container |
| .grid-2 | container | define all item (`50%` container width) width from same container |
| .grid-3 | container | define all item (`33.3333%` container width) width from same container |
| .grid-4 | container | define all item (`25%` container width) width from same container |
| .grid-sm-1 ~ .grid-sm-12 | item | define single item width (`8.3333% ~ 100%` container width) under device width over `576px` |
| .grid-md-1 ~ .grid-md-12 | item | define single item width (`8.3333% ~ 100%` container width) under device width over `768px` |
| .grid-lg-1 ~ .grid-lg-12 | item | define single item width (`8.3333% ~ 100%` container width) under device width over `992px` |
| .grid-xl-1 ~ .grid-xl-12 | item | define single item width (`8.3333% ~ 100%` container width) under device width over `1200px` |
If you are using version `0.3.x` :
| selector | target | description |
| -------- | ------ | ----------- |
| .grid-full | container | define all item (`100%` container width) width from same container |
| .grid-2 | container | define all item (`50%` container width) width from same container |
| .grid-3 | container | define all item (`33.3333%` container width) width from same container |
| .grid-4 | container | define all item (`25%` container width) width from same container |
| .small-grid-fit | container | define `flex: 1` , but it only works on device which width over `576px` |
| .small-grid-full | container | same as `.grid-full` , but it only works on device which width over `576px` |
| .small-grid-2 | container | same as `.grid-2` , but it only works on device which width over `576px` |
| .small-grid-3 | container | same as `.grid-3` , but it only works on device which width over `576px` |
| .small-grid-4 | container | same as `.grid-4` , but it only works on device which width over `576px` |
| .large-grid-fit | container | define `flex: 1` , it only works on device which width over `768px` |
| .large-grid-full | container | same as `.grid-full` , but it only works on device which width over `768px` |
| .large-grid-2 | container | same as `.grid-2` , but it only works on device which width over `768px` |
| .large-grid-3 | container | same as `.grid-3` , but it only works on device which width over `768px` |
| .large-grid-4 | container | same as `.grid-4` , but it only works on device which width over `768px` |