Grid
24格网格
预览
8
8
8
6
6
6
6
4
4
4
4
4
4
2
2
2
2
2
2
2
2
2
2
2
2
代码
* {
box-sizing: border-box;
}
<g-row class="demoRow">
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
</g-row>
<g-row class="demoRow">
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
</g-row>
<g-row class="demoRow">
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
</g-row>
<g-row class="demoRow">
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
</g-row>设置 gutter
预览
8
8
8
6
6
6
6
代码
* {
box-sizing: border-box;
}
<g-row class="demoRow" gutter="10">
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
</g-row>
<g-row class="demoRow" gutter="10">
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6">
<div class="demoCol">6</div>
</g-col>
</g-row>设置空隙
预览
8
8
6
6
4
4
4
2
2
2
2
2
2
2
2
代码
* {
box-sizing: border-box;
}
<g-row class="demoRow" gutter="10">
<g-col span="8">
<div class="demoCol">8</div>
</g-col>
<g-col span="8" offset="8">
<div class="demoCol">8</div>
</g-col>
</g-row>
<g-row class="demoRow" gutter="10">
<g-col span="6" offset="6">
<div class="demoCol">6</div>
</g-col>
<g-col span="6" offset="6">
<div class="demoCol">6</div>
</g-col>
</g-row>
<g-row class="demoRow" gutter="10">
<g-col span="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4" offset="4">
<div class="demoCol">4</div>
</g-col>
<g-col span="4" offset="8">
<div class="demoCol">4</div>
</g-col>
</g-row>
<g-row class="demoRow" gutter="10">
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2" offset="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2" offset="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2" offset="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2">
<div class="demoCol">2</div>
</g-col>
<g-col span="2" offset="2">
<div class="demoCol">2</div>
</g-col>
</g-row>