logo
简体中文

导航菜单

文档

Grid

基础用法

第一列
第二列
第三列 
---
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>

响应式布局

响应式网格
在不同屏幕尺寸下
显示不同的列数 
---
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>

自定义间距

行间距大
列间距小
第三项
第四项 
---
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>

垂直外边距

第一列
第二列
第三列 
---
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>

边框

第一列
第二列 
---
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>

搜索