Grid
Responsive grid layout container, providing flexible control over columns and spacing. Based on BrConfigProvider for global theme configuration.
Component Features
- 📐 Responsive Columns: Set column count via
cols prop with responsive object support.
- ↔️ Item Span: Control how many columns a single grid item spans via
BrGridItem span prop.
- 📏 Gap Control: Control total, horizontal, and vertical gaps via
gap, gapX, gapY props.
- 📱 Breakpoints: Supports
sm, md, lg, xl, xxl responsive breakpoints.
- 🎨 Theme Configuration: Based on
BrConfigProvider for global theming.
- 🌓 Dark Mode: Automatically adapts to dark mode.
Basic Usage
Use cols prop to set the number of columns, and gap prop to set spacing between grid items.
<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>
Responsive Columns
By specifying column props for different breakpoints (sm, md, lg, xl, xxl), you can achieve responsive grid layouts adapting to screen sizes.
<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>
Grid Item Span
Use the span prop of BrGridItem to control how many columns a single grid item spans. Also supports responsive prefixes.
<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>
Custom Spacing
You can set horizontal and vertical spacing separately via gapX and 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>
Theming
Global Customization (BrConfigProvider)
Use the sizing prop of BrConfigProvider to override default CSS variables. Set gap to a preset size name (like 'md') to responsively use the corresponding variable from global config.
<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>
Local Customization (TailwindCSS)
You can use TailwindCSS class names to directly override component styles, supporting responsive prefixes.
<template>
<BrGrid :cols="3" class="!gap-1 sm:!gap-4">
<BrGridItem>Local override spacing</BrGridItem>
</BrGrid>
</template>
API
BrGrid Props
BrGridItem Props