flexgrid

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 flex() mixin.

<section>
  <figure>...</figure>
  <figure>...</figure>
</section>

section
  box()

figure
  block(1/3)
  &:first-child
    flex()

flex() 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
    flex(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.

Browser Support

• We are using both Flexbox (IE10) and calc() (IE9). So IE10+ with poor support in older Android devices.