Grid 栅格
基础用法
常规用法,只设置span
属性
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 组件之间的间隔
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
设置偏移量
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>