Modern CSS flexbox grid framework
v1.4 | npm | github | cornflex.css | cornflex.min.css 8ko
Wrap your content based on the breakpoint, become fluid when smaller to the breakpoint value.
.container(-sm|-md|-lg)
Let you define a grid of row containing columns with a specific size.
.row .col(-sm|-md|-lg) -> use remaining space
.row .col-[1..12](-sm|-md|-lg) -> limit to n/12
Add space based on the gutter value between columns.
.row-gutter
Reverse order for right-to-left languages.
.row-rtl
Specify how to horizontally align cols in row.
.row-[left|center|right|between|around](-sm|-md|-lg)
Specify how to vertically align cols in row.
.row-[top|middle|bottom](-sm|-md|-lg)
Individually specify how to vertically align cols in row.
.col-[top|middle|bottom](-sm|-md|-lg)
Re-order cols in row (dot not change the `dom`)
.col-nth-[1..12](-sm|-md|-lg)
Shift cols using the remaining space or to specific offset.
.col-shift(-sm|-md|-lg) -> use the remaining space
.col-shift-[0..11](-sm|-md|-lg) -> to specific col offset
Hide cols from specific breakpoint.
.col-hide(-sm|-md|-lg)