# box-grid LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/box-grid` 的使用方式。

## 模块定位

栅格占位格数 span 优先级最高：配置了span后，其他的响应式配置将失效； 范围 0 ～ 24 为 0 相当于隐藏 为 24 相当于独占一行

## 导入方式

```ts
import { BoxGrid } from '@flatbiz/antd/box-grid';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `Col`
- `BoxColProps`
- `PresetDefaultGrid`
- `DefaultGutter`
- `RowAligns`
- `RowJustify`
- `alignPropsMap`
- `justifyPropsMap`
- `defaultCtx`
- `BoxGridProviderCtx`
- `BoxGridProviderContextType`
- `useBoxBreakpoint` - 监听盒子大小变化，返回当前的断点
- `useGutter` - 处理间距
- `BoxGrid`
- `Row`
- `BoxRowProps`
- `TBoxBreakpoint`
- `ICommonReact`
- `Gutter`
- `GutterParams`
- `getGridMapByRange` - 获取栅格响应式布局的配置

## Props / 配置要点

### BoxColProps

- `span`（可选）：: number；栅格占位格数 span 优先级最高：配置了span后，其他的响应式配置将失效； 范围 0 ～ 24 为 0 相当于隐藏 为 24 相当于独占一行
- `xs`（可选）：: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number; removeWrapper?: boolean;；屏幕 < 576px

### BoxGridProviderContextType

- `horizontalGap`（必填）：: number
- `verticalGap`（必填）：: number
- `boxBreakpoint`（必填）：: TBoxBreakpoint
- `defaultGrid`（必填）：: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; }

### BoxRowProps

- `defaultGrid`（可选）：: Partial<typeof PresetDefaultGrid>；在不同响应尺寸下的元素占位格数 应用到所有Col子元素上
- `gutter`（可选）：: GutterParams；间距
- `align`（可选）：: 'top' | 'middle' | 'bottom' | 'stretch'；flex 布局的垂直对齐方式
- `justify`（可选）：: | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'；flex 布局的水平排列方式
- `onBoxBreakpointChange`（可选）：: (breakpoint: TBoxBreakpoint) => void；尺寸变化回调

## 使用规则与行为

- 栅格占位格数 span 优先级最高：配置了span后，其他的响应式配置将失效； 范围 0 ～ 24 为 0 相当于隐藏 为 24 相当于独占一行
- 屏幕 < 576px
- 屏幕 ≥ 576px
- 屏幕 ≥ 768px
- 屏幕 ≥ 992px
- 屏幕 ≥ 1200px
- 屏幕 ≥ 1600px
- 是否移除 外部包装div
- 监听盒子大小变化，返回当前的断点 @param dom @returns
- width为0，或者不存在

## 基础示例

```tsx
import { BoxGrid, type BoxColProps } from '@flatbiz/antd/box-grid';

const props: BoxColProps = {
  // 按业务传入必要参数
};

<BoxGrid {...props} />;
```

## 源码索引

- `src/box-grid/col.tsx`
- `src/box-grid/constant.ts`
- `src/box-grid/ctx.ts`
- `src/box-grid/hooks.ts`
- `src/box-grid/index.ts`
- `src/box-grid/row.tsx`
- `src/box-grid/type.ts`
- `src/box-grid/utils.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/box-grid` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。