Grid

Responsive grid layout container, providing flexible control over columns and spacing. Based on BrConfigProvider for global theme configuration.

Basic Usage

Use cols prop to set the number of columns, and gap prop to set spacing between grid items.

Grid Item 1

Grid Item 2

Grid Item 3

Item 1

Item 2

Item 3

Item 4

Example

Responsive Columns

By specifying column props for different breakpoints (sm, md, lg, xl, xxl), you can achieve responsive grid layouts adapting to screen sizes.

Resize browser window to see column changes：Default 1 columns，sm Breakpoint 2 columns，md Breakpoint 3 columns，lg Breakpoint 4 columns

Responsive 1

Responsive 2

Responsive 3

Responsive 4

Example

Grid Item Span

Use the span prop of BrGridItem to control how many columns a single grid item spans. Also supports responsive prefixes.

span=2

span=1

span=4

span=2

Example

Custom Spacing

You can set horizontal and vertical spacing separately via gapX and gapY.

Horizontal Gap (gapX="8") and Vertical Gap (gapY="2")

Item 1

Item 2

Item 3

Item 4

Example

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.

Use md breakpoint configuration variable as gap(gap="md")

Gap: 1rem

Gap: 1rem

Gap: 1rem

Local override style(Use TailwindCSS Class Name !gap-1)

Forced !gap-1

Forced !gap-1

Forced !gap-1

Example

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

Prop Name	Type	Default	Description
as	string	'div'	Render as HTML tag or component
cols	number | string	1	Base number of columns
sm	number | string	-	Number of columns at sm breakpoint (>=640px)
md	number | string	-	Number of columns at md breakpoint (>=768px)
lg	number | string	-	Number of columns at lg breakpoint (>=1024px)
xl	number | string	-	Number of columns at xl breakpoint (>=1280px)
xxl	number | string	-	Number of columns at 2xl breakpoint (>=1536px)
gap	number | string	-	Overall grid gap
gapX	number | string	-	Horizontal grid gap
gapY	number | string	-	Vertical grid gap
justify	'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'	-	Horizontal alignment
align	'start' | 'end' | 'center' | 'baseline' | 'stretch'	-	Vertical alignment

BrGridItem Props

Prop Name	Type	Default	Description
as	string	'div'	Render as HTML tag or component
span	number | string	-	Number of columns to span
sm	number | string	-	Number of columns to span at sm breakpoint
md	number | string	-	Number of columns to span at md breakpoint
lg	number | string	-	Number of columns to span at lg breakpoint
xl	number | string	-	Number of columns to span at xl breakpoint
xxl	number | string	-	Number of columns to span at 2xl breakpoint
colStart	number | string	-	Start column position
colEnd	number | string	-	End column position