Top

网格/栅格系统 （自适应分辨率12栅格布局）

Dsure提供了100%宽度的自适应所有分辨率网格系统，如果您需要固定的最外层宽度，可以自己设定一个宽度，再在内部使用网格系统
    div标签与span标签都支持网格系统

特别注意：网格系统示范的代码的class=""双引号内不能叠加任何通用样式或者自定义样式，如果要控制网格细节,请在包裹<div class="dsure-row">的外部容器上进行样式控制，否则可能造成网格布局错乱

(1) 2:4:6栅格布局

如果您需要左右相反的栅格布局，只要调换<div class="dsure-row">里面的div标签的先后顺序即可

2
4
6
 
HTML代码:

<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代码:



<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代码:


<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栅格布局

如果您需要左右相反的栅格布局，只要调换<div class="dsure-row">里面的div标签的先后顺序即可

3
9
 
HTML代码:


<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栅格布局

如果您需要左右相反的栅格布局，只要调换<div class="dsure-row">里面的div标签的先后顺序即可

4
8
 
HTML代码:


<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栅格布局

如果您需要左右相反的栅格布局，只要调换<div class="dsure-row">里面的div标签的先后顺序即可

5
7
 
HTML代码:


<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栅格布局

如果您需要左右相反的栅格布局，只要调换<div class="dsure-row">里面的div标签的先后顺序即可

2
10
 
HTML代码:


<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栅格布局

如果您需要左右相反的栅格布局，只要调换<div class="dsure-row">里面的div标签的先后顺序即可

1
11
 
HTML代码:


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

(9) 12等份栅格布局

12等份
12等份
12等份
12等份
12等份
12等份
12等份
12等份
12等份
12等份
12等份
12等份
 
HTML代码:


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

(10) 11等份栅格布局

11等份
11等份
11等份
11等份
11等份
11等份
11等份
11等份
11等份
11等份
11等份
 
HTML代码:


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

</div>

(11) 10等份栅格布局

10等份
10等份
10等份
10等份
10等份
10等份
10等份
10等份
10等份
10等份
 
HTML代码:


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

</div>

(12) 9等份栅格布局

9等份
9等份
9等份
9等份
9等份
9等份
9等份
9等份
9等份
 
HTML代码:


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

</div>

(13) 8等份栅格布局

8等份
8等份
8等份
8等份
8等份
8等份
8等份
8等份
 
HTML代码:


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

</div>

(14) 7等份栅格布局

7等份
7等份
7等份
7等份
7等份
7等份
7等份
 
HTML代码:


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

</div>

(15) 6等份栅格布局

6等份
6等份
6等份
6等份
6等份
6等份
 
HTML代码:


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

(16) 5等份栅格布局

5等份
5等份
5等份
5等份
5等份
 
HTML代码:


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

</div>

(17) 4等份栅格布局

4等份
4等份
4等份
4等份
 
HTML代码:


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

(18) 3等份栅格布局

3等份
3等份
3等份
 
HTML代码:

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

(19) 2等份栅格布局

2等份
2等份
 
HTML代码:


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