Simple Flexbox grid layout system built with Unistyle
- Responsive, mobile first approach
- Define specific colum size or use a flex column (a column that grows to fill space)
- Define offset to push column a specific number of columns.
- Set your own number of columns!
>_ npm install unistyle-flex-grid --save
import flexGrid from 'unistyle-flex-grid'; ... export default = [ flexGrid, /* your styles here */ ];
You can use the compiled, prefixed, and minified version of unistyle-flex-grid as a standalone CSS downloading the files found in the dist directory of this repository and adding it to your project using the
<link> HTML tag.
<link rel="stylesheet" href=".../ufg.min.css">
columns: The number of columns you want your grid to be, defaults to 12
gutter: The gutter width used for each column, defaults to 0.5rem;
breakpoints: The Flex Grid breakpoints object, binds grid namespaces to media queries. Read more about namespaces in the next section. Defaults to
.row: Flex box container, use this to wrap columns.
.col-(breakpoint): This creates a column that will grow/shrink depending on available space in the defined breakpoint.
.col-(breakpoint)-(number): This creates a column that span the specific number of columns in the defined breakpoint. Default valid numbers are 1-12.
.off-(breakpoint)-(number): This will offset a column by a specific number of columns in the defined breakpoint. Default valid numbers are 1-11.
Valid breakpoints are
xs breakpoint is default and uses no media queries.
- Report bugs by opening a new issue
- If you want to contribute some code open an issue for discussion first.