Flexbox Grid Mixin

What does this mixin do?

This project is a single SCSS / SASS library that provides a few powerful mixins to creating a flexbox-based grid system. It supports both a "standard grid" that most are familiar with, as well as a flex grid.

Why another grid library?

All of the solutions I could find out there fell into two main categories:

• Did not support flexbox instead favoring float: left; solutions
• Required the use of .col-1-xs or some other cluttered markup syntax

What I was after was a way to set my grid only using SCSS mixins inspired by how Thoughtbot's neat framework works.

Features

Flex Grid

Using the flex grid means setting @include columns(12); will give a column a larger flex property. It is preferred to use @include column; in this configuration and modifying the flex-grow and flex-shrink values yourself.

"Standard" / Legacy Grid

What I mean by a "standard grid" here is that in a 12 column configuration, you can have an incomplete row of columns only occupying > 12 columns. This will leave a space at the end of the row untouched.

Example

For an example of both use cases, check out the basic example page.