# form-grid LLMs.txt

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

## 模块定位

网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }

## 导入方式

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

## 公开导出

- `FormCol` - 网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
- `FormColProps`
- `FormOperateCol` - FormOperateCol 布局说明
- `FormOperateColProps`
- `FormRow` - FormItem网格响应式布局 ``` 1. 应用场景：Form条件布局 2. 子元素只能是 FormGrid.Col、FormGrid.OperateCol，其他会被忽略 3. 所有子元素中只能存在一个 FormGrid.OperateCol
- `FormRowProps`
- `FormGrid`
- `calculateOperateGrid` - 用于计算 operateCol 所占用网格数

## 依赖的 antd 能力

`Col`、`Form`、`Row`、`RowProps`、`Space`、`SpaceProps`

## Props / 配置要点

### FormColProps

- `span`（可选）：: number；栅格占位格数，替换lg、xl、xxl默认数据
- `xs`（可选）：: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number; forceAloneRow?: boolean; children?: ReactNode | ReactNode[]; // 隐藏，结构还在 hidden?: bo…；屏幕 < 576px

### FormOperateColProps

- `className`（可选）：: string
- `leftList`（可选）：: Array<ReactElement | null>
- `rightList`（可选）：: Array<ReactElement | null>
- `forceAloneRow`（可选）：: boolean；强制单独一行
- `hidden`（可选）：: boolean
- `leftSpaceProps`（可选）：: SpaceProps
- `rightSpaceProps`（可选）：: SpaceProps

### FormRowProps

- `children`（可选）：: ReactNode | ReactNode[]

## 使用规则与行为

- 栅格占位格数，替换lg、xl、xxl默认数据
- 屏幕 < 576px
- 屏幕 ≥ 576px
- 屏幕 ≥ 768px
- 屏幕 ≥ 992px
- 屏幕 ≥ 1200px
- 屏幕 ≥ 1600px
- 强制单独一行
- 网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
- FormOperateCol 布局说明

## 基础示例

```tsx
import { FormGrid, type FormColProps } from '@flatbiz/antd/form-grid';

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

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

## 源码索引

- `src/form-grid/form-col.tsx`
- `src/form-grid/form-operate-col.tsx`
- `src/form-grid/form-row.tsx`
- `src/form-grid/index.ts`
- `src/form-grid/utils.ts`

## 给 LLM 的注意事项

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