Skip to content
On this page

Grid 栅格

基础用法

常规用法,只设置span属性

1212   888   6666
html
<ivy-row>
  <ivy-col span="12">12</ivy-col>
  <ivy-col span="12" style="background-color: #67C23A;">12</ivy-col>
</ivy-row>
<ivy-row>
  <ivy-col span="8">8</ivy-col>
  <ivy-col span="8" style="background-color: #67C23A;">8</ivy-col>
  <ivy-col span="8">8</ivy-col>
</ivy-row>
<ivy-row>
  <ivy-col span="6">6</ivy-col>
  <ivy-col span="6" style="background-color: #67C23A;">6</ivy-col>
  <ivy-col span="6">6</ivy-col>
  <ivy-col span="6" style="background-color: #67C23A;">6</ivy-col>
</ivy-row>

间隔

通过Gutter设置 col 组件之间的间隔

6666
html
<ivy-row gutter="10">
  <ivy-col span="6">6</ivy-col>
  <ivy-col span="6" style="background-color: #67C23A;">6</ivy-col>
  <ivy-col span="6">6</ivy-col>
  <ivy-col span="6" style="background-color: #67C23A;">6</ivy-col>
</ivy-row>

偏移量

通过Offset设置偏移量

848
html
<ivy-row>
  <ivy-col span="8">8</ivy-col>
  <ivy-col span="4" offset="4" style="background-color: #67C23A;">4</ivy-col>
  <ivy-col span="8">8</ivy-col>
</ivy-row>

MIT Licensed