Grid 网格

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

基础用法

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

Grid Item 1

Grid Item 2

Grid Item 3

Item 1

Item 2

Item 3

Item 4

Example

响应式列数

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

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

网格项跨度

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

span=2

span=1

span=4

span=2

Example

自定义间距

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

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

Item 1

Item 2

Item 3

Item 4

Example

主题定制

全局定制 (BrConfigProvider)

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

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

局部定制 (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	-	结束列位置