Grid
Fluid responsive grid example
Fluid responsive grid markup
<div class="demo_gs gs_container">
<div class="gs_row">
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
<div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
<div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
<div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
<div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
<div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
<div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-3 gs-mobile_col-6">3</div>
<div class="demo_col gs_col-3 gs-mobile_col-6">3</div>
<div class="demo_col gs_col-3 gs-mobile_col-6">3</div>
<div class="demo_col gs_col-3 gs-mobile_col-6">3</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-4 gs-mobile_col-12">4</div>
<div class="demo_col gs_col-4 gs-mobile_col-12">4</div>
<div class="demo_col gs_col-4 gs-mobile_col-12">4</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-6 gs-mobile_col-12">6</div>
<div class="demo_col gs_col-6 gs-mobile_col-12">6</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-12">12</div>
</div>
</div>
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
Fluid grid with pushed and pulled columns
Fluid grid markup
<div class="demo_gs gs_container">
<div class="gs_row">
<div class="demo_col gs_col-1">1</div>
<div class="demo_col gs_col-1">1</div>
<div class="demo_col gs_col-1">1</div>
<div class="demo_col gs_col-1">1</div>
<div class="demo_col gs_col-1 gs_push-4">1</div>
<div class="demo_col gs_col-1">1</div>
<div class="demo_col gs_col-1">1</div>
<div class="demo_col gs_col-1">1</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-2 gs_push-2">2</div>
<div class="demo_col gs_col-2 gs_push-1 gs_pull-1">2</div>
<div class="demo_col gs_col-2">2</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-3 gs_push-3">3</div>
<div class="demo_col gs_col-3">3</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-4 gs_pull-4">4</div>
<div class="demo_col gs_col-4">4</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-6 gs_push-3">6</div>
</div>
<div class="gs_row">
<div class="demo_col gs_col-12">12</div>
</div>
</div>
1
1
1
1
1
1
1
1
2
2
2
3
3
4
4
6
12