Col Layout Rules

TIP

All components support layout configuration. For detailed information, see

Vant Grid Layout Col props

Custom Form Layout

Configuration Method

In FormCreate, configure component layout using the rule.col property. Vant uses a 24-column grid system and defaults to full width.

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    col: {
        span: 12,  // Takes up 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',
    // If col is not set, it defaults to full width
}

Two Column Layout

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

Three Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 8,  // Takes up 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 8,  // Takes up 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Stock',
        field: 'stock',
        col: {
            span: 8,  // Takes up 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 to the right
    }
}

Using Row and Col Components for Layout

Besides using the rule.col property, you can also use row and col components to manually control the layout.

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