网格
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;
}
.demoRow{
margin: 10px 0;
}
.demoCol{
height: 50px;
border: 1px solid #ccc;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
<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;
}
.demoRow{
margin: 10px 0;
}
.demoCol{
height: 50px;
border: 1px solid #ccc;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
<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;
}
.demoRow{
margin: 10px 0;
}
.demoCol{
height: 50px;
border: 1px solid #ccc;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
<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>