Flexbox Grid Mixins

Sass Mixins to generate Flexbox grid

Gap (grid-gap) css property

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

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