# FormGrid
> FormGrid component
## Markup Schema example
```tsx
import React from 'react'
import { FormItem, Input, FormGrid } from '@formily/<%= repoName %>'
import { FormProvider, createSchemaField } from '@formily/react'
import { createForm } from '@formily/core'
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
FormGrid,
},
})
const form = createForm()
export default () => {
return (
)
}
```
## JSON Schema case
```tsx
import React from 'react'
import { FormItem, Input, FormGrid } from '@formily/<%= repoName %>'
import { FormProvider, createSchemaField } from '@formily/react'
import { createForm } from '@formily/core'
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
FormGrid,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
grid: {
type: 'void',
'x-component': 'FormGrid',
'x-component-props': {
minColumns: [4, 6, 10],
},
properties: {
aaa: {
type: 'string',
title: 'AAA',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
bbb: {
type: 'string',
title: 'BBB',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
ccc: {
type: 'string',
title: 'CCC',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
ddd: {
type: 'string',
title: 'DDD',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
eee: {
type: 'string',
title: 'EEE',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
fff: {
type: 'string',
title: 'FFF',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
ggg: {
type: 'string',
title: 'GGG',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
},
}
export default () => {
return (
)
}
```
## Native case
```tsx
import React from 'react'
import { FormGrid } from '@formily/<%= repoName %>'
const { GridColumn } = FormGrid
const Cell = ({ children }) => {
return (
{children}
)
}
export default () => {
return (
maxColumns 3 + minColumns 2
1 |
2 |
3 |
4 |
5 |
6 |
maxColumns 3
1 |
2 |
3 |
4 |
5 |
6 |
minColumns 2
1 |
2 |
3 |
4 |
5 |
6 |
Null
1 |
2 |
3 |
4 |
5 |
6 |
minWidth 150 +maxColumns 3
1 |
2 |
3 |
4 |
5 |
6 |
maxWidth 120+minColumns 2
1 |
2 |
3 |
4 |
5 |
6 |
maxWidth 120 + gridSpan -1
1 |
2 |
3 |
)
}
```
## Query Form case
```tsx
import React, { useMemo, useState, useEffect, Fragment } from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/react'
import {
Form,
Input,
Select,
DatePicker,
FormItem,
FormGrid,
Submit,
Reset,
FormButtonGroup,
} from '@formily/<%= repoName %>'
const QueryForm: React.FC = (props) => {
const [expanded, setExpanded] = useState(false)
const [grid, setGrid] = useState()
const updateChildren = () => {
if (grid) {
grid.children.forEach((node, index) => {
if (index === grid.childSize - 1) return
node.element.style.display = !expanded && node.row > 1 ? 'none' : ''
})
}
}
const renderActions = () => {
return (
Query
Reset
)
}
const renderButtonGroup = () => {
if (grid?.rows < 2) {
return (
{renderActions()}
)
}
return (
{grid?.rows > 1 ? (
{
e.preventDefault()
setExpanded(!expanded)
}}
>
{expanded ? 'Fold' : 'UnFold'}
) : null}
{renderActions()}
)
}
useEffect(() => {
updateChildren()
}, [expanded, grid])
return (
)
}
const SchemaField = createSchemaField({
components: {
QueryForm,
Input,
Select,
DatePicker,
FormItem,
},
})
export default () => {
const form = useMemo(() => createForm(), [])
return (
)
}
```
## API
### FormGrid
| Property name | Type | Description | Default value |
| ------------- | -------------------- | ------------------------------------- | ----------------- |
| minWidth | `number \| number[]` | Minimum element width | 100 |
| maxWidth | `number \| number[]` | Maximum element width | - |
| minColumns | `number \| number[]` | Minimum number of columns | 0 |
| maxColumns | `number \| number[]` | Maximum number of columns | - |
| breakpoints | number[] | Container size breakpoints | `[720,1280,1920]` |
| columnGap | number | Column spacing | 8 |
| rowGap | number | Row spacing | 4 |
| colWrap | boolean | Wrap | true |
| strictAutoFit | boolean | Is width strictly limited by maxWidth | false |
note:
- minWidth takes priority over minColumn
- maxWidth has priority over maxColumn
- The array format of minWidth/maxWidth/minColumns/maxColumns represents the mapping with the breakpoint array
### FormGrid.GridColumn
| Property name | Type | Description | Default value |
| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | ------------- |
| gridSpan | number | The number of columns spanned by the element, if it is -1, it will automatically fill the cell across columns in reverse | 1 |