Grid 网格

响应式网格布局容器，提供对列数和间距的灵活控制。基于 BrConfigProvider 实现全局主题配置。

组件特性

📐 响应式列数：通过 cols 属性设置基础列数，支持 sm、md、lg、xl、xxl 断点响应式配置。
🔗 网格项跨度：BrGridItem 支持 span 属性控制跨越列数。
📏 灵活间距：gap、gapX、gapY 属性分别控制整体、水平、垂直间距。
🎯 对齐控制：支持 justify（水平对齐）和 align（垂直对齐）属性。
🎨 主题定制：基于 BrConfigProvider 实现全局主题配置和 TailwindCSS 局部覆盖。

基础用法

使用 cols 属性设置列数，使用 gap 属性设置网格项之间的间距。

<script setup lang="ts">
import { BrGrid, BrGridItem } from '@breezeui/vue'
</script>

<template>
  <div class="w-full space-y-4">
    <BrGrid :cols="3" gap="4">
      <BrGridItem v-for="i in 3" :key="i" class="bg-primary/10 border border-primary/20 p-4 rounded-md text-center text-primary font-medium">
        Grid Item {{ i }}
      </BrGridItem>
    </BrGrid>
    
    <BrGrid :cols="4" gap="2">
      <BrGridItem v-for="i in 4" :key="i" class="bg-secondary border border-border p-2 rounded-md text-center text-secondary-foreground text-sm">
        Item {{ i }}
      </BrGridItem>
    </BrGrid>
  </div>
</template>

响应式列数

通过为不同的断点（sm, md, lg, xl, xxl）指定列数属性，你可以实现适应屏幕尺寸的响应式网格布局。

<script setup lang="ts">
import { BrGrid, BrGridItem } from '@breezeui/vue'
</script>

<template>
  <div class="w-full">
    <p class="mb-4 text-sm text-muted-foreground">Resize browser window to see column changes：Default 1 columns，sm Breakpoint 2 columns，md Breakpoint 3 columns，lg Breakpoint 4 columns</p>
    <BrGrid :cols="1" :sm="2" :md="3" :lg="4" gap="4">
      <BrGridItem v-for="i in 4" :key="i" class="bg-info/10 border border-info/20 p-4 rounded-md text-center text-info font-medium transition-all duration-300">
        Responsive {{ i }}
      </BrGridItem>
    </BrGrid>
  </div>
</template>

网格项跨度

使用 BrGridItem 的 span 属性来控制单个网格项跨越多少列。同样支持响应式前缀。

<script setup lang="ts">
import { BrGrid, BrGridItem } from '@breezeui/vue'
</script>

<template>
  <div class="w-full space-y-4">
    <BrGrid :cols="3" gap="4">
      <BrGridItem :span="2" class="bg-warning/10 border border-warning/20 p-4 rounded-md text-center text-warning font-medium">
        span=2
      </BrGridItem>
      <BrGridItem :span="1" class="bg-warning/10 border border-warning/20 p-4 rounded-md text-center text-warning font-medium">
        span=1
      </BrGridItem>
    </BrGrid>
    
    <BrGrid :cols="6" gap="4">
      <BrGridItem :span="4" class="bg-success/10 border border-success/20 p-4 rounded-md text-center text-success font-medium">
        span=4
      </BrGridItem>
      <BrGridItem :span="2" class="bg-success/10 border border-success/20 p-4 rounded-md text-center text-success font-medium">
        span=2
      </BrGridItem>
    </BrGrid>
  </div>
</template>

自定义间距

你可以通过 gapX 和 gapY 分别设置水平和垂直间距。

<script setup lang="ts">
import { BrGrid, BrGridItem } from '@breezeui/vue'
</script>

<template>
  <div class="w-full space-y-6">
    <div>
      <p class="mb-2 text-sm text-muted-foreground">Horizontal Gap (gapX="8") and Vertical Gap (gapY="2")</p>
      <BrGrid :cols="2" gap-x="8" gap-y="2">
        <BrGridItem v-for="i in 4" :key="i" class="bg-primary/10 border border-primary/20 p-2 rounded-md text-center text-primary">
          Item {{ i }}
        </BrGridItem>
      </BrGrid>
    </div>
  </div>
</template>

主题定制

全局定制 (BrConfigProvider)

使用 BrConfigProvider 的 sizing 属性覆盖默认 CSS 变量。将 gap 设置为预设尺寸名称（如 'md'），以响应式地使用全局配置中的相应变量。

<script setup lang="ts">
import { ref } from 'vue'
import { BrGrid, BrGridItem, BrConfigProvider, BrButton } from '@breezeui/vue'

const currentSizing = ref({
  md: { paddingX: '1rem' }, // We will use paddingX variable as gap
  lg: { paddingX: '2rem' }
})

const toggleSizing = () => {
  if (currentSizing.value.md.paddingX === '1rem') {
    currentSizing.value = {
      md: { paddingX: '3rem' },
      lg: { paddingX: '4rem' }
    }
  } else {
    currentSizing.value = {
      md: { paddingX: '1rem' },
      lg: { paddingX: '2rem' }
    }
  }
}
</script>

<template>
  <div class="space-y-4">
    <BrButton @click="toggleSizing">Toggle global gap configuration</BrButton>
    
    <BrConfigProvider :sizing="currentSizing">
      <div class="w-full bg-muted/30 p-4 rounded-md space-y-4">
        <p class="text-sm text-muted-foreground">Use md breakpoint configuration variable as gap(gap="md")</p>
        <BrGrid :cols="3" gap="md" class="transition-all duration-300">
          <BrGridItem v-for="i in 3" :key="i" class="bg-primary/10 border border-primary/20 p-4 rounded-md text-center text-primary">
            Gap: {{ currentSizing.md.paddingX }}
          </BrGridItem>
        </BrGrid>
        
        <p class="text-sm text-muted-foreground mt-4">Local override style(Use TailwindCSS Class Name !gap-1)</p>
        <BrGrid :cols="3" gap="md" class="!gap-1 transition-all duration-300">
          <BrGridItem v-for="i in 3" :key="i" class="bg-destructive/10 border border-destructive/20 p-4 rounded-md text-center text-destructive">
            Forced !gap-1
          </BrGridItem>
        </BrGrid>
      </div>
    </BrConfigProvider>
  </div>
</template>

局部定制 (TailwindCSS)

你可以使用 TailwindCSS 类名直接覆盖组件样式，支持响应式前缀。

<template>
  <BrGrid :cols="3" class="!gap-1 sm:!gap-4">
    <BrGridItem>局部覆盖间距</BrGridItem>
  </BrGrid>
</template>

API

BrGrid Props

属性名	类型	默认值	说明
as	`string`	`'div'`	渲染为 HTML 标签或组件
cols	`number \| string`	`1`	基础列数
sm	`number \| string`	-	sm 断点 (>=640px) 下的列数
md	`number \| string`	-	md 断点 (>=768px) 下的列数
lg	`number \| string`	-	lg 断点 (>=1024px) 下的列数
xl	`number \| string`	-	xl 断点 (>=1280px) 下的列数
xxl	`number \| string`	-	2xl 断点 (>=1536px) 下的列数
gap	`number \| string`	-	整体网格间距
gapX	`number \| string`	-	水平网格间距
gapY	`number \| string`	-	垂直网格间距
justify	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-	水平对齐方式
align	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	-	垂直对齐方式

BrGridItem Props

属性名	类型	默认值	说明
as	`string`	`'div'`	渲染为 HTML 标签或组件
span	`number \| string`	-	跨越的列数
sm	`number \| string`	-	sm 断点下跨越的列数
md	`number \| string`	-	md 断点下跨越的列数
lg	`number \| string`	-	lg 断点下跨越的列数
xl	`number \| string`	-	xl 断点下跨越的列数
xxl	`number \| string`	-	2xl 断点下跨越的列数
colStart	`number \| string`	-	起始列位置
colEnd	`number \| string`	-	结束列位置

#Grid 网格

#组件特性

#基础用法

#响应式列数

#网格项跨度

#自定义间距

#主题定制

#全局定制 (BrConfigProvider)

#局部定制 (TailwindCSS)

#API

#BrGrid Props

#BrGridItem Props