Flexbox Grid Mixins

Sass Mixins to generate Flexbox grid

Flexbox Grid Mixins Example

12
1
11
2
10
3
9
4
8
5
7
6
6

No Gutters Grid

12
1
11
2
10
3
9
4
8
5
7
6
6

Condensed Grid

12
1
11
2
10
3
9
4
8
5
7
6
6

Auto Size Grid

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Equal Size Grid

equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal
equal

Nesting Grid

6
6
3
3
3
3
2
10
2
10
2
10
2
10

Multi-line Grid

12
1
11
2
10
3
9
4
8
5
7
6
6

Multi-line Grid using ul

Preset Grid Columns

null - @include grid-col($col: null);

null
null null null null null null
3
3

initial - @include grid-col($col: initial);

initial
initial initial initial initial initial initial initial initial initial initial initial initial
3
3
initial
3
3

<number> - @include grid-col($col: <number>);

3
3
3
3
3
3
3

auto - @include grid-col($col: auto);

auto
auto auto auto auto auto auto auto auto auto auto auto auto auto auto
3
3
auto
3
3

equal - @include grid-col($col: equal);

equal
equal
equal equal equal equal equal equal equal equal equal equal
3
3
equal
3
3

none - @include grid-col($col: none);

none
none none none none none none none none none none none none
3
3
none
3
3

Grid Direction

Rows

1
2
3

Rows Reverse

1
2
3

Columns

1
2
3

Columns Reverse

1
2
3

Grid Alignment

Left row

1
2
3

Center row

1
2
3

Right row

1
2
3

Space around row

1
2
3

Space between row

1
2
3

Top row

1
1
1
1
1
1
2
3
3
3

Middle row

1
1
1
1
1
1
2
3
3
3

Bottom row

1
1
1
1
1
1
2
3
3
3

Stretch row

1
1
1
1
1
1
2
3
3
3

Baseline row

1
1
1
1
1
1
2
3
3
3

Column Alignment

none
none
none
none
none
none
Top
Top
Middle
Bottom
Bottom
Bottom
Stretch
Stretch
Stretch
Baseline
Baseline

Column Order

1
2
3
4
5
1
2
3
4
5

Multi-line Alignment

Top Line

1
1
1
2
3
3
4
4
5
5
6

Middle Line

1
1
1
2
3
3
4
4
5
5
6

Bottom Line

1
1
1
2
3
3
4
4
5
5
6

Space between Line

1
1
1
2
3
3
4
4
5
5
6

Space around Line

1
1
1
2
3
3
4
4
5
5
6

Stretch Line

1
1
1
2
3
3
4
4
5
5
6