logo
简体中文

导航菜单

文档

astro
grid

Grid

简介

Grid 组件是一个灵活的网格布局组件，用于创建响应式的多列布局。它封装了 CSS Grid 的常用功能，提供简单易用的接口来控制网格的列数和间距。

组件特性：

  • 支持固定列数和响应式列数配置
  • 提供多种间距选项（行间距、列间距、整体间距）
  • 支持垂直外边距设置
  • 可选的边框显示
  • 响应式设计，适配不同屏幕尺寸

案例

第一列
第二列
第三列

Props

background

背景色类型，支持所有预设背景色和透明度变体。

默认背景
第二列
第三列
主色调背景
第二列
第三列
主色调半透明
第二列
第三列
强调色背景
第二列
第三列
成功色背景
第二列
第三列
警告色背景
第二列
第三列
错误色背景
第二列
第三列
默认背景
第二列
第三列
主色调背景
第二列
第三列
主色调半透明
第二列
第三列
强调色背景
第二列
第三列
成功色背景
第二列
第三列
警告色背景
第二列
第三列
错误色背景
第二列
第三列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    默认背景
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md" background="primary">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    主色调背景
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md" background="primary/20">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    主色调半透明
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md" background="accent">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    强调色背景
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md" background="success">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    成功色背景
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md" background="warning">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    警告色背景
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md" background="error">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    错误色背景
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      默认背景
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md" background="primary">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      主色调背景
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md" background="primary/20">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      主色调半透明
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md" background="accent">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      强调色背景
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md" background="success">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      成功色背景
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md" background="warning">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      警告色背景
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md" background="error">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      错误色背景
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>

border

是否显示边框。

带边框的网格
第二列
无边框的网格
第二列
带边框的网格
第二列
不带边框的网格
第二列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={2} gap="md" border>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">带边框的网格</div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">第二列</div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={2} gap="md">
  <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">无边框的网格</div>
  <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">第二列</div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="2" gap="md" border="sm">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">带边框的网格</div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">第二列</div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="2" gap="md" border="none">
    <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">不带边框的网格</div>
    <div class="cosy:bg-base-100 cosy:p-4 cosy:text-center">第二列</div>
  </Grid>
</template>

class

自定义CSS类，可用于覆盖默认样式。

自定义样式
第二列
第三列
自定义样式
第二列
第三列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid
  cols={3}
  gap="md"
  class="cosy:bg-gradient-to-r cosy:from-primary/20 cosy:to-secondary/20 cosy:p-6 cosy:rounded-xl">
  <div
    class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center cosy:shadow-lg">
    自定义样式
  </div>
  <div
    class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center cosy:shadow-lg">
    第二列
  </div>
  <div
    class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center cosy:shadow-lg">
    第三列
  </div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid
    :cols="3"
    gap="md"
    class="cosy:bg-gradient-to-r cosy:from-primary/20 cosy:to-secondary/20 cosy:p-6 cosy:rounded-xl"
  >
    <div
      class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center cosy:shadow-lg"
    >
      自定义样式
    </div>
    <div
      class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center cosy:shadow-lg"
    >
      第二列
    </div>
    <div
      class="cosy:bg-base-100 cosy:p-4 cosy:rounded-lg cosy:text-center cosy:shadow-lg"
    >
      第三列
    </div>
  </Grid>
</template>

colGap

列间距，默认与 gap 相同。

列间距大
第二列
第三列
默认间距
第二列
第三列
列间距大
第二列
第三列
默认间距
第二列
第三列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} colGap="lg">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    列间距大
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="md">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    默认间距
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" colGap="lg">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      列间距大
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="md">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      默认间距
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>

cols

网格列数，可以是固定值或响应式对象。

2列布局
第二列
4列布局
第二列
第三列
第四列
响应式布局
第二列
第三列
2列布局
第二列
4列布局
第二列
第三列
第四列
响应式布局
第二列
第三列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={2} gap="md">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    2列布局
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={4} gap="md">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    4列布局
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
  <div class="cosy:bg-info/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第四列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={{ base: 1, md: 2, lg: 3 }} gap="md">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    响应式布局
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="2" gap="md">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      2列布局
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="4" gap="md">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      4列布局
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
    <div class="cosy:bg-info/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第四列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="{ base: 1, md: 2, lg: 3 }" gap="md">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      响应式布局
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>

gap

网格间距，可选值：none, xs, sm, md, lg, xl。

小间距
第二列
第三列
大间距
第二列
第三列
小间距
第二列
第三列
大间距
第二列
第三列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="sm">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    小间距
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={3} gap="lg">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    大间距
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三列
  </div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="sm">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      小间距
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="3" gap="lg">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      大间距
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三列
    </div>
  </Grid>
</template>

marginY

垂直外边距，可选值：none, xs, sm, md, lg, xl。

上方内容

有垂直外边距
第二列

下方内容

上方内容

无垂直外边距
第二列

下方内容

上方内容

有垂直外边距
第二列

下方内容

上方内容

无垂直外边距
第二列

下方内容

---



import { Grid } from "@coffic/cosy-ui";
---

<div class="cosy:bg-base-200 cosy:p-4 cosy:rounded-lg">
  <p class="cosy:mb-4">上方内容</p>
  <Grid cols={2} gap="md" marginY="lg">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      有垂直外边距
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
  </Grid>
  <p class="cosy:mt-4">下方内容</p>
</div>

---



import { Grid } from "@coffic/cosy-ui";
---

<div class="cosy:bg-base-200 cosy:p-4 cosy:rounded-lg">
  <p class="cosy:mb-4">上方内容</p>
  <Grid cols={2} gap="md">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      无垂直外边距
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
  </Grid>
  <p class="cosy:mt-4">下方内容</p>
</div>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:bg-base-200 cosy:p-4 cosy:rounded-lg">
    <p class="cosy:mb-4">上方内容</p>
    <Grid :cols="2" gap="md" marginY="lg">
      <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
        有垂直外边距
      </div>
      <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
        第二列
      </div>
    </Grid>
    <p class="cosy:mt-4">下方内容</p>
  </div>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:bg-base-200 cosy:p-4 cosy:rounded-lg">
    <p class="cosy:mb-4">上方内容</p>
    <Grid :cols="2" gap="md">
      <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
        无垂直外边距
      </div>
      <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
        第二列
      </div>
    </Grid>
    <p class="cosy:mt-4">下方内容</p>
  </div>
</template>

rowGap

行间距，默认与 gap 相同。

行间距大
第二列
第三行第一列
第三行第二列
默认行间距
第二列
第三行第一列
第三行第二列
行间距大
第二列
第三行第一列
第三行第二列
默认行间距
第二列
第三行第一列
第三行第二列
---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={2} rowGap="lg">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    行间距大
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三行第一列
  </div>
  <div class="cosy:bg-info/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三行第二列
  </div>
</Grid>

---



import { Grid } from "@coffic/cosy-ui";
---

<Grid cols={2} gap="md">
  <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    默认行间距
  </div>
  <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第二列
  </div>
  <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三行第一列
  </div>
  <div class="cosy:bg-info/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
    第三行第二列
  </div>
</Grid>

<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="2" rowGap="lg">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      行间距大
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三行第一列
    </div>
    <div class="cosy:bg-info/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三行第二列
    </div>
  </Grid>
</template>


<script setup lang="ts">
import { Grid } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Grid :cols="2" gap="md">
    <div class="cosy:bg-primary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      默认行间距
    </div>
    <div class="cosy:bg-secondary/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第二列
    </div>
    <div class="cosy:bg-accent/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三行第一列
    </div>
    <div class="cosy:bg-info/10 cosy:p-4 cosy:rounded-lg cosy:text-center">
      第三行第二列
    </div>
  </Grid>
</template>

搜索