Grids | Dsure Front-end Development Framework

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

 
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

 
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

 
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

 
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

 
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

 
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

 
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

 
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

 
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

 
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

 
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>