Grid

基础用法

最基本的网格布局，通过 cols 属性设置列数，gap 属性控制间距。

第一列

第二列

第三列

<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>

响应式布局

通过传入响应式对象，在不同屏幕尺寸下展示不同的列数。

响应式网格

在不同屏幕尺寸下

显示不同的列数

<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>

自定义间距

可以分别设置行间距（rowGap）和列间距（colGap）。

行间距大

列间距小

第三项

第四项

<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>