<!-- CDN-->
<linkrel="stylesheet"href="https://unpkg.com/grid-style@latest/dist/index.min.css">
<!-- or -->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/grid-style@latest/dist/index.min.css">
<!-- recommend you to add version number to url ending. eg.https://unpkg.com/grid-style@x.y.z -->
Usage
// import css file to js fileimport'grid-style/dist/index.min.css'// orimport'grid-style/dist/index.css'// a sass alternative to css fileimport'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.
<divclass="grid grid-bottom">
<!-- all child item element will be bottom-aligned excluding grid-cell alignment element -->
<divclass="grid-cell">
<!-- content of this area will be bottom-aligned -->
</div>
<divclass="grid-cell grid-cell-center">
<!-- content of this area will be vertically-centered because of grid-cell-center -->
</div>
</div>
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.