Customize Form Layout

You can customize the layout of form components by setting the col configuration item. Different UI frameworks support different layout systems, such as grid layouts and flexbox. The following explains how to use these layout rules to customize your forms.

element-ui Col | ant-design-vue Col | naive-ui Col | arco-design Col | t-design Col

Use Built-in col Layout Rules

In form-create, the col configuration item sets the layout of components. If col is not set, the default layout is { span: 24 }, meaning each component occupies the full row. You can adjust component width and arrangement using the col property.

Use Grid Layout Components

For more flexible layouts, use grid layout components to manually control component position and size. Different UI frameworks provide grid layout components, such as Element UI's Col and Ant Design Vue's Col. Choose the appropriate grid component based on your specific needs.