A unique Flexbox grid system for SCSS and Stylus that allows you to create horizontal or vertical Flexbox grids on-the-fly.
Features
- Ability to create vertical grids
- Pass ratios (fractions or decimals) to assign sizing (e.g.
block(1/4)
would create blocks that are 1/4 the size of their container with a gutter between them) - Easy CSS masonry
- Consistently sized nested gutters without any additional context needing to be passed (i.e.
block(1/4)
works the same if it's a top level element or nested)
Installation
- Just
@import
FlexGrid at the top of your stylesheet.
Usage
FlexGrid operates primarily on 2 mixins: box()
and block()
.
Think of box()
like the container element in other grid systems - except it can work vertically as well as horizontally.
Think of block()
like the columns in other grid systems - except it can work vertically as well as horizontally.
... ... ...
section ) figure 1/3)
Now let's make those elements display vertically instead of horizontally.
section column) figure 1/3, column)
Maybe you'd like to have one element larger than the others?
... ...
section ) figure &:first-child 2/3) &:last-child 1/3)
By default FlexGrid displays elements in a traditional grid. This means elements won't expand to fill their container. To change this behavior, simply use the stretch()
mixin.
... ...
section ) figure 1/3) &:first-child )
stretch()
can also be configured to create CSS masonry easily.
...
section ) img 1/3) &:first-child masonry)
Finally, you may want to have a gutter for a specific grid. Just pass the $gut
parameter your gutter size for both the box()
and the block()
.
section $gut: 60px) figure 1/3, $gut: 60px)
Settings
$gutter
- The default gutter size between all grid elements.
Note The grid, like Flexbox, takes some getting used to, but once you get the hang of it, it adds a lot of power to Flexbox by letting you size and space things according to a real grid other than just with proportions. Feel free to mix real Flexbox rules into your stylesheets as FlexGrid doesn't impede on Flexbox in any way.