<!-- recommend you to add version number to url ending. eg.https://unpkg.com/grid-style@x.y.z-->
Usage
// 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'
/* 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)
<divclass="grid">
<divclass="grid-cell grid-cell-2">
<!-- something you like -->
</div>
<divclass="grid-cell">
<!-- something you like -->
</div>
</div>
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.