Mixed Column Pack

Unlimited layout possibility

Rule of thumb

In order to create a well rounded responsive mixed grid combination, column combination of 2, 3 and 4 are the perfect mixed that work just fine for all the major breakpoint without any tweaks. If the combination is greater than the recommended,then the higher combination would cascade and stack within the containing block.

General Setup

Equal Height Columns

The identifier is the row, learn more about row-class.

 
    <div class="row">
         <!-- Two mixed sample -->
	     <div class="g16-mc-8"></div>
	     <div class="g16-mc-8"></div>

    </div>

Unequal Height Columns

The identifier is the group, learn more about group-class.

 
    <div class="group">
         <!-- Four mixed sample -->
	     <div class="g16-mc-3"></div>
	     <div class="g16-mc-4"></div>
	     <div class="g16-mc-8"></div>
	     <div class="g16-mc-1"></div>
    </div>

2 mixed ratio

16
1
15
2
14
3
13
4
12
5
11
6
10
7
9
8
8

3 mixed ratio

16
2
3
11
3
4
9
4
5
7
5
6
5
9
4
3
8
3
5
5
5
6

4 mixed ratio variation

16
2
3
4
7
3
4
5
4
4
5
3
4
5
6
4
4
6
6
3
3
7
2
4
5
4
4
4
4
3
3
5
5

5 mixed ratio

16
2
2
3
4
5
3
2
3
4
4
7
3
2
3
1
3
3
3
4
3
4
2
2
4
4
2
3
2
2
7
5
4
3
2
2