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

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
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
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

Grid Columns

Default 12 Columns

12
6 / 12
6 / 12
3 / 12
9 / 12

3 Columns

3
1 / 3
2 / 3

24 Columns

24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
2 / 24
4 / 24
4 / 24
4 / 24
4 / 24
4 / 24
4 / 24
8 / 24
8 / 24
8 / 24
12 / 24
12 / 24

Preset Grid Columns

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

null
3
3
null
null null null null null null null null null null null null null null null null null null
3
3

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

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

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

3
3
3
3
3
3
3
3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3
3

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

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

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

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

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

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

positive number - @include grid-col($col: positive);

grow: 1
grow: 2
grow: 1
grow: 2
grow: 3
grow: 1
grow: 2
grow: 1
grow: 2
grow: 4

Grid Direction

Row - @include grid($flex-direction: row);

1
2
3

Row Reverse - @include grid($flex-direction: row-reverse);

1
2
3

Column - @include grid($flex-direction: column);

1
2
3

Column Reverse - @include grid($flex-direction: column-reverse);

1
2
3

Wrap Alignment

null - @include grid($flex-wrap: null);

1
2
3
3
3
2
2

nowrap - @include grid($flex-wrap: nowrap);

1
2
3
3
3
2
2

wrap - @include grid($flex-wrap: wrap);

1
2
3
3
3
2
2

wrap reverse - @include grid($flex-wrap: wrap-reverse);

1
2
3
3
3
2
2

Row Alignment

Left row - @include grid($justify-content: flex-start);

1
2
3

Center row - @include grid($justify-content: center);

1
2
3

Right row - @include grid($justify-content: flex-end);

1
2
3

Space around row - @include grid($justify-content: space-around);

1
2
3

Space between row - @include grid($justify-content: space-between);

1
2
3

Space evenly row - @include grid($justify-content: space-evenly);

1
2
3

Top row - @include grid($align-items: flex-start);

1
1
1
1
1
1
2
3
3
3

Middle row - @include grid($align-items: center);

1
1
1
1
1
1
2
3
3
3

Bottom row - @include grid($align-items: flex-end);

1
1
1
1
1
1
2
3
3
3

Stretch row - @include grid($align-items: stretch);

1
1
1
1
1
1
2
3
3
3

Baseline row - @include grid($align-items: baseline);

1
1
1
1
1
1
2
3
3
3

Centered row

3
3
3

Items row Alignment

$align-self: null
null
null
null
null
null
null
$align-self: auto
Auto
$align-self: flex-start
Top
$align-self: center
Middle
$align-self: flex-end
Bottom
$align-self: stretch
Stretch
$align-self: baseline
Baseline

Column Alignment

Left column - @include grid($align-items: flex-start);

1
2
3

Center column - @include grid($align-items: center);

1
2
3

Right column - @include grid($align-items: flex-end);

1
2
3

Centered column

3
3

Items column Alignment

$align-self: null
null
null
null
null
null
null
$align-self: auto
Auto
$align-self: flex-start
Top
$align-self: center
Middle
$align-self: flex-end
Bottom

Row Order

1
2
3
4
5

Ordered

1
2
3
4
5

Column Order

1
2
3
4
5

Ordered

1
2
3
4
5

Multi-line Alignment

Top Line - @include grid($align-content: flex-start);

1
1
1
2
3
3
4
4
5
5
6

Middle Line - @include grid($align-content: center);

1
1
1
2
3
3
4
4
5
5
6

Bottom Line - @include grid($align-content: flex-end);

1
1
1
2
3
3
4
4
5
5
6

Space between Line - @include grid($align-content: space-between);

1
1
1
2
3
3
4
4
5
5
6

Space around Line - @include grid($align-content: space-around);

1
1
1
2
3
3
4
4
5
5
6

Stretch Line - @include grid($align-content: stretch);

1
1
1
2
3
3
4
4
5
5
6

Width

$max-width: 200px
200
$max-width: 100px
100 100 100 100 100
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

condense - @include grid-col($condense: true);

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