RESPONSIVE COLUMNS
grid 12
grid 11
grid 1
grid 10
grid 2
grid 9
grid 3
grid 8
grid 4
grid 7
grid 5
grid 6
grid 6
grid 4
grid 4
grid 4
grid 3
grid 3
grid 3
grid 3
grid 5
grid 4
grid 3
GET CODE
<div class="jf_col grid_12 last-column">grid 12</div> <div class="jf_col grid_11">grid 11</div> <div class="jf_col grid_1 last-column">grid 1</div> <div class="jf_col grid_10">grid 10</div> <div class="jf_col grid_2 last-column">grid 2</div> <div class="jf_col grid_9">grid 9</div> <div class="jf_col grid_3 last-column">grid 3</div> <div class="jf_col grid_8">grid 8</div> <div class="jf_col grid_4 last-column">grid 4</div> <div class="jf_col grid_7">grid 7</div> <div class="jf_col grid_5 last-column">grid 5</div> <div class="jf_col grid_6">grid 6</div> <div class="jf_col grid_6 last-column">grid 6</div> <div class="jf_col grid_4">grid 4</div> <div class="jf_col grid_4">grid 4</div> <div class="jf_col grid_4 last-column">grid 4</div> <div class="jf_col grid_3">grid 3</div> <div class="jf_col grid_3">grid 3</div> <div class="jf_col grid_3">grid 3</div> <div class="jf_col grid_3 last-column">grid 3</div> <div class="jf_col grid_5">grid 5</div> <div class="jf_col grid_4">grid 4</div> <div class="jf_col grid_3 last-column">grid 3</div>
FLUID COLUMNS
2/3
1/3
2/3
1/3
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/4
1/2
1/4
GET CODE
<div class="jf_fluid"> <div class="col-2-3"> <div class="module"><h3>2/3</h3></div> </div> <div class="col-1-3 last"> <div class="module"><h3>1/3</h3></div> </div> </div> <div class="jf_fluid"> <div class="col-2-3"> <div class="module"><h3>2/3</h3></div> </div> <div class="col-1-3 last"> <div class="module"><h3>1/3</h3></div> </div> </div> <div class="jf_fluid"> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5 last"> <div class="module"><h3>1/5</h3></div> </div> </div> <div class="jf_fluid"> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6 last"> <div class="module"><h3>1/6</h3></div> </div> </div> <div class="jf_fluid"> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7 last"> <div class="module"><h3>1/7</h3></div> </div> </div> <div class="jf_fluid"> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8 last"> <div class="module"><h3>1/8</h3></div> </div> </div> <div class="jf_fluid"> <div class="col-1-4"> <div class="module"><h3>1/4</h3></div> </div> <div class="col-1-2"> <div class="module"><h3>1/2</h3></div> </div> <div class="col-1-4 last"> <div class="module"><h3>1/4</h3></div> </div> </div>
FLUID COLUMNS - WITH NO "PADDINGS"
2/3
1/3
2/3
1/3
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/4
1/2
1/4
GET CODE
<div class="jf_fluid no_paddings"> <div class="col-2-3"> <div class="module"><h3>2/3</h3></div> </div> <div class="col-1-3"> <div class="module"><h3>1/3</h3></div> </div> </div> <div class="jf_fluid no_paddings"> <div class="col-2-3"> <div class="module"><h3>2/3</h3></div> </div> <div class="col-1-3"> <div class="module"><h3>1/3</h3></div> </div> </div> <div class="jf_fluid no_paddings"> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> <div class="col-1-5"> <div class="module"><h3>1/5</h3></div> </div> </div> <div class="jf_fluid no_paddings"> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> <div class="col-1-6"> <div class="module"><h3>1/6</h3></div> </div> </div> <div class="jf_fluid no_paddings"> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> <div class="col-1-7"> <div class="module"><h3>1/7</h3></div> </div> </div> <div class="jf_fluid no_paddings"> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> <div class="col-1-8"> <div class="module"><h3>1/8</h3></div> </div> </div> <div class="jf_fluid no_paddings"> <div class="col-1-4"> <div class="module"><h3>1/4</h3></div> </div> <div class="col-1-2"> <div class="module"><h3>1/2</h3></div> </div> <div class="col-1-4"> <div class="module"><h3>1/4</h3></div> </div> </div>