Col Layout Rules

TIP

All components support layout configuration. See

Vant Grid Layout Col props

Custom Form Layout

Configuration Method

Configure component layout using rule.col. Vant uses a 24-column grid system (default: full width).

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

Configuration Parameters

Parameter	Description	Type	Default Value
span	Column element width	number | string	-
offset	Column element offset distance	number | string	-
tag	Custom element tag	string	div

Layout Examples

Basic Layout

Single Column Layout (Default)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    // Default: full width
}

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

Use offset to Set Left Offset

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

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: 'stepper',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'stepper',
                        title: 'Product Stock',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: 'Is Listed',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

Tip

• When using row and col components, set native: true to render components as-is
• Vant uses a 24-column grid system, ideal for mobile layouts
• For mobile devices, single or two-column layouts are recommended for better UX