Col Layout Rules

TIP

All components support layout configuration. See

arco-design Grid Layout Col props

Custom Form Layout

Configuration Method

Configure component layout using rule.col. Default is { span: 24 } (full row) if not set.

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    col: {
        span: 12,  // 12 columns (half width)
    }
}

Configuration Parameters

Parameter	Description	Type	Default	Version
span	Number of grid columns occupied	number	24
offset	Number of columns to offset on the left	number	-
order	Order of elements	number	-
xs	Responsive grid for < 576px	number | { [key: string]: any }	-
sm	Responsive grid for >= 576px	number | { [key: string]: any }	-
md	Responsive grid for >= 768px	number | { [key: string]: any }	-
lg	Responsive grid for >= 992px	number | { [key: string]: any }	-
xl	Responsive grid for >= 1200px	number | { [key: string]: any }	-
xxl	Responsive grid for >= 1600px	number | { [key: string]: any }	-
flex	Set flex layout properties	number | string | 'initial' | 'auto' | 'none'	-	2.10.0

Layout Examples

Basic Layout

Single Column Layout (Default)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    // Default: span: 24 (full row)
}

Two Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 12,  // 12 columns (half width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 12,  // 12 columns (half width)
        }
    }
]

Three Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 8,  // 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 8,  // 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Stock',
        field: 'stock',
        col: {
            span: 8,  // 8 columns (1/3 width)
        }
    }
]

Offset Layout

Using offset to Set Left Offset

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        span: 12,
        offset: 6,  // Offset 6 columns right
    }
}

Responsive Layout

Basic Responsive

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        xs: 24,  // Full row when <576px
        sm: 12,  // Half width when >=576px
        md: 8,   // 1/3 width when >=768px
        lg: 6,   // 1/4 width when >=992px
        xl: 4,   // 1/6 width when >=1200px
        xxl: 3,  // 1/8 width when >=1600px
    }
}

Flex Layout

Using flex Property

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        flex: 'auto',  // Auto-fill remaining space
    }
}

Using Row and Col Components for Layout

Use row and col components to manually control layout instead of rule.col.

Basic Usage

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: {
                    span: 12,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: {
                    span: 12,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            }
        ]
    }
]

Multi-Row Layout

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'select',
                        title: 'Product Category',
                        field: 'category',
                    }
                ]
            }
        ]
    },
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Stock',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: 'Is On Sale',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

Tip

• When using row and col components, set native: true to generate components as-is
• Arco Design uses a 24-column grid system
• Supports flex property for Flex layout
• You can set properties like gutter through row's props