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>