Grid 栅格
通过基础的 24 分栏，迅速简便地创建布局。
TIP
组件默认使用 Flex 布局，不需要手动设置 type="flex"。 请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满
基础用法
展开查看
vue
<template>
<yum-row>
<yum-col :span="24">
<div style="background-color: #ADC8FF; height: 35px; border-radius: 8px"></div>
</yum-col>
</yum-row>
<br />
<br />
<yum-row>
<yum-col :span="12">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col :span="12">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
</yum-row>
<br />
<br />
<yum-row tag="div">
<yum-col tag="span" :span="12">
<div style="background-color: #ADC8FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
</yum-row>
<br />
<br />
<yum-row tag="div" :gutter="20" justify="end">
<yum-col tag="span" :span="6">
<div style="background-color: #ADC8FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
</yum-row>
<br />
<br />
</template>分栏间隔
展开查看
vue
<template>
<div>
<yum-row tag="div" :gutter="40" justify="end">
<yum-col tag="span" :span="6">
<div style="background-color: #ADC8FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
<yum-col tag="span" :span="6">
<div style="background-color: #D6E4FF; height: 35px; border-radius: 8px"></div>
</yum-col>
</yum-row>
</div>
</template>