Grid
基础用法
第一列
第二列
第三列
---
import { Grid } from '@coffic/cosy-ui';
---
<Grid cols={3} gap="md">
<div class="cosy:bg-base-200 cosy:p-4">第一列</div>
<div class="cosy:bg-base-200 cosy:p-4">第二列</div>
<div class="cosy:bg-base-200 cosy:p-4">第三列</div>
</Grid>
响应式布局
响应式网格
在不同屏幕尺寸下
显示不同的列数
---
import { Grid } from '@coffic/cosy-ui';
---
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap="lg">
<div class="cosy:bg-base-200 cosy:p-4">响应式网格</div>
<div class="cosy:bg-base-200 cosy:p-4">在不同屏幕尺寸下</div>
<div class="cosy:bg-base-200 cosy:p-4">显示不同的列数</div>
</Grid>
自定义间距
行间距大
列间距小
第三项
第四项
---
import { Grid } from '@coffic/cosy-ui';
---
<Grid cols={2} rowGap="lg" colGap="sm">
<div class="cosy:bg-base-200 cosy:p-4">行间距大</div>
<div class="cosy:bg-base-200 cosy:p-4">列间距小</div>
<div class="cosy:bg-base-200 cosy:p-4">第三项</div>
<div class="cosy:bg-base-200 cosy:p-4">第四项</div>
</Grid>