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
Multi-line Grid
12
1
11
2
10
3
9
4
8
5
7
6
6
Multi-line Grid using ul
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
Grid Columns
Default 12 Columns
12
6 / 12
6 / 12
3 / 12
9 / 12
3 Columns
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);
Row Reverse - @include grid($flex-direction: row-reverse);
Column - @include grid($flex-direction: column);
Column Reverse - @include grid($flex-direction: column-reverse);
Wrap Alignment
null - @include grid($flex-wrap: null);
nowrap - @include grid($flex-wrap: nowrap);
wrap - @include grid($flex-wrap: wrap);
wrap reverse - @include grid($flex-wrap: wrap-reverse);
Row Alignment
Left row - @include grid($justify-content: flex-start);
Center row - @include grid($justify-content: center);
Right row - @include grid($justify-content: flex-end);
Space around row - @include grid($justify-content: space-around);
Space between row - @include grid($justify-content: space-between);
Space evenly row - @include grid($justify-content: space-evenly);
Top row - @include grid($align-items: flex-start);
Middle row - @include grid($align-items: center);
Bottom row - @include grid($align-items: flex-end);
Stretch row - @include grid($align-items: stretch);
Baseline row - @include grid($align-items: baseline);
Centered row
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);
Center column - @include grid($align-items: center);
Right column - @include grid($align-items: flex-end);
Centered column
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
Ordered
Column Order
Ordered
Multi-line Alignment
Top Line - @include grid($align-content: flex-start);
Middle Line - @include grid($align-content: center);
Bottom Line - @include grid($align-content: flex-end);
Space between Line - @include grid($align-content: space-between);
Space around Line - @include grid($align-content: space-around);
Stretch Line - @include grid($align-content: stretch);
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