Top

Grids

The 12 column grid uses percentages.

(1) 2:4:6

You could swap the position of the HTML tags like div within <div class="dsure-row">.

2
4
6
 
HTML Code:

<div class="dsure-row">
      <div class="dsure-small-2 dsure-columns">2</div>
      <div class="dsure-small-4 dsure-columns">4</div>
      <div class="dsure-small-6 dsure-columns">6</div>
</div>


            

(2) 3:6:3

3
6
3
 
HTML Code:



<div class="dsure-row">
      <div class="dsure-large-3 dsure-columns">3</div>
      <div class="dsure-large-6 dsure-columns">6</div>
      <div class="dsure-large-3 dsure-columns">3</div>
</div>


            
            

(3) 2:8:2

2
8
2
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-2 dsure-columns">2</div>
      <div class="dsure-large-8 dsure-columns">8</div>
      <div class="dsure-large-2 dsure-columns">2</div>
</div>

            
            

(4) 3:9

You could swap the position of the HTML tags like div within <div class="dsure-row">.

3
9
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-small-3 dsure-columns">3</div>
      <div class="dsure-small-9 dsure-columns">9</div>
</div>
    

            
            

(5) 4:8

You could swap the position of the HTML tags like div within <div class="dsure-row">.

4
8
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-4 dsure-columns">4</div>
      <div class="dsure-large-8 dsure-columns">8</div>
</div>


 
            
            

(6) 5:7

You could swap the position of the HTML tags like div within <div class="dsure-row">.

5
7
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-5 dsure-columns">5</div>
      <div class="dsure-large-7 dsure-columns">7</div>
</div>

 
            
            

(7) 2:10

You could swap the position of the HTML tags like div within <div class="dsure-row">.

2
10
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-small-2 dsure-columns">2</div>
      <div class="dsure-small-10 dsure-columns">10</div>
</div>
                
            
            

(8) 1:11

You could swap the position of the HTML tags like div within <div class="dsure-row">.

1
11
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-1 dsure-columns">1</div>
      <div class="dsure-large-11 dsure-columns">11</div>
</div>
 
            
            

(9) Mean 12

Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
Mean 12
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
      <div class="dsure-large-1 dsure-columns">Mean 12</div>
</div>
 
            
            

(10) Mean 11

Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
Mean 11
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>
      <div class="dsure-average-11 dsure-columns">Mean 11</div>   
      <div class="dsure-average-11 dsure-columns">Mean 11</div>   

</div>
 
            
            

(11) Mean 10

Mean 10
Mean 10
Mean 10
Mean 10
Mean 10
Mean 10
Mean 10
Mean 10
Mean 10
Mean 10
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>
      <div class="dsure-average-10 dsure-columns">Mean 10</div>

</div>
 
            
            

(12) Mean 9

Mean 9
Mean 9
Mean 9
Mean 9
Mean 9
Mean 9
Mean 9
Mean 9
Mean 9
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>
      <div class="dsure-average-9 dsure-columns">Mean 9</div>

</div>
 
            
            

(13) Mean 8

Mean 8
Mean 8
Mean 8
Mean 8
Mean 8
Mean 8
Mean 8
Mean 8
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>
      <div class="dsure-average-8 dsure-columns">Mean 8</div>

</div>
 
            
            

(14) Mean 7

Mean 7
Mean 7
Mean 7
Mean 7
Mean 7
Mean 7
Mean 7
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-average-7 dsure-columns">Mean 7</div>
      <div class="dsure-average-7 dsure-columns">Mean 7</div>
      <div class="dsure-average-7 dsure-columns">Mean 7</div>
      <div class="dsure-average-7 dsure-columns">Mean 7</div>
      <div class="dsure-average-7 dsure-columns">Mean 7</div>
      <div class="dsure-average-7 dsure-columns">Mean 7</div>
      <div class="dsure-average-7 dsure-columns">Mean 7</div>

</div>
 
            
            

(15) Mean 6

Mean 6
Mean 6
Mean 6
Mean 6
Mean 6
Mean 6
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-2 dsure-columns">Mean 6</div>
      <div class="dsure-large-2 dsure-columns">Mean 6</div>
      <div class="dsure-large-2 dsure-columns">Mean 6</div>
      <div class="dsure-large-2 dsure-columns">Mean 6</div>
      <div class="dsure-large-2 dsure-columns">Mean 6</div>
      <div class="dsure-large-2 dsure-columns">Mean 6</div>
</div>
 
            
            

(16) Mean 5

Mean 5
Mean 5
Mean 5
Mean 5
Mean 5
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-average-5 dsure-columns">Mean 5</div>
      <div class="dsure-average-5 dsure-columns">Mean 5</div>
      <div class="dsure-average-5 dsure-columns">Mean 5</div>
      <div class="dsure-average-5 dsure-columns">Mean 5</div>
      <div class="dsure-average-5 dsure-columns">Mean 5</div>
      

</div>
 
            
            

(17) Mean 4

Mean 4
Mean 4
Mean 4
Mean 4
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-3 dsure-columns">Mean 4</div>
      <div class="dsure-large-3 dsure-columns">Mean 4</div>
      <div class="dsure-large-3 dsure-columns">Mean 4</div>
      <div class="dsure-large-3 dsure-columns">Mean 4</div>
</div>
 
            
            

(18) Mean 3

Mean 3
Mean 3
Mean 3
 
HTML Code:

<div class="dsure-row">
      <div class="dsure-large-4 dsure-columns">Mean 3</div>
      <div class="dsure-large-4 dsure-columns">Mean 3</div>
      <div class="dsure-large-4 dsure-columns">Mean 3</div>
</div>


            

(19) Mean 2

Mean 2
Mean 2
 
HTML Code:


<div class="dsure-row">
      <div class="dsure-large-6 dsure-columns">Mean 2</div>
      <div class="dsure-large-6 dsure-columns">Mean 2</div>
</div>