logo
English

导航菜单

Documents

Grid

Basic Usage

第一列
第二列
第三列 
---
import { Grid, PlaceHolder } from '@coffic/cosy-ui';
---

<Grid cols={3} gap="md" border>
  <PlaceHolder width="full" height="lg" background="base-200">
    第一列
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第二列
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第三列
  </PlaceHolder>
</Grid>

Responsive Layout

响应式网格
在不同屏幕尺寸下
显示不同的列数 
---
import { Grid, PlaceHolder } from '@coffic/cosy-ui';
---

<Grid cols={{ base: 1, md: 2, lg: 3 }} gap="lg" border>
  <PlaceHolder width="full" height="lg" background="base-200">
    响应式网格
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    在不同屏幕尺寸下
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    显示不同的列数
  </PlaceHolder>
</Grid>

Custom Spacing

行间距大
列间距小
第三项
第四项 
---
import { Grid, PlaceHolder } from '@coffic/cosy-ui';
---

<Grid cols={2} rowGap="lg" colGap="sm" border>
  <PlaceHolder width="full" height="lg" background="base-200">
    行间距大
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    列间距小
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第三项
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第四项
  </PlaceHolder>
</Grid>

Vertical Margin

第一列
第二列
第三列 
---
import { Grid, PlaceHolder } from '@coffic/cosy-ui';
---

<Grid cols={3} gap="md" marginY="lg" border>
  <PlaceHolder width="full" height="lg" background="base-200">
    第一列
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第二列
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第三列
  </PlaceHolder>
</Grid>

Border

第一列
第二列 
---
import { Grid, PlaceHolder } from '@coffic/cosy-ui';
---

<Grid cols={2} gap="md" border>
  <PlaceHolder width="full" height="lg" background="base-200">
    第一列
  </PlaceHolder>
  <PlaceHolder width="full" height="lg" background="base-200">
    第二列
  </PlaceHolder>
</Grid>

搜索