flexgrid
v4.1.0
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>...</figure>
<figure>...</figure>
<figure>...</figure>
</section>
section
box()
figure
block(1/3)
Now let's make those elements display vertically instead of horizontally.
section
box(column)
figure
block(1/3, column)
Maybe you'd like to have one element larger than the others?
<section>
<figure>...</figure>
<figure>...</figure>
</section>
section
box()
figure
&:first-child
block(2/3)
&:last-child
block(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>...</figure>
<figure>...</figure>
</section>
section
box()
figure
block(1/3)
&:first-child
stretch()
stretch()
can also be configured to create CSS masonry easily.
<section>
<img src="http://placehold.it/700x150&text=1">
<img src="http://placehold.it/400x150&text=2">
<img src="http://placehold.it/200x150&text=3">
<img src="http://placehold.it/375x150&text=4">
...
</section>
section
box()
img
block(1/3)
&:first-child
stretch(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
box($gut: 60px)
figure
block(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.