logo
English

导航菜单

Documents

astro
grid

Grid

Introduction

The Grid component is a flexible grid layout component for creating responsive multi-column layouts. It encapsulates common CSS Grid functionality and provides a simple interface to control grid columns and spacing.

Component features:

  • Supports fixed and responsive column configurations
  • Provides multiple spacing options (row gap, column gap, overall gap)
  • Supports vertical margin settings
  • Optional border display
  • Responsive design, adapts to different screen sizes

Examples

第一列
第二列
第三列

Props

background

Background color type, supports all preset background colors and opacity variants.

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



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

Whether to display a 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

Custom CSS class that can be used to override default styles.

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



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

Column gap, defaults to the same as 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

Number of grid columns, can be a fixed value or responsive object.

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

Grid spacing, options: 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

Vertical margin, options: 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

Row gap, defaults to the same as 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>

搜索