Col Layout Rules

TIP

All components support layout configuration. For detailed information, see

TDesign Grid Layout Col props

Custom Form Layout

Configuration Method

Set component layout using the rule.col option. TDesign uses a 12-column grid system with default span: 12 (half width).

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

Configuration Parameters

Col Props

Name	Type	Default	Description	Required
flex	String / Number	-	Flex layout fill. CSS property flex value. Examples: 2 / 3 / '100px' / 'auto' / '1 1 200px'	N
lg	Number / Object	-	≥1200px responsive grid, can be a grid number or an object containing other properties (small desktop). TS type: number | BaseColProps	N
md	Number / Object	-	≥992px responsive grid, can be a grid number or an object containing other properties (extra small desktop). TS type: number | BaseColProps	N
offset	Number	0	Number of spacing columns on the left side of the grid. Grids cannot be placed within the spacing	N
order	Number	0	Grid order, effective in flex layout mode	N
pull	Number	0	Number of columns to move the grid to the left	N
push	Number	0	Number of columns to move the grid to the right	N
sm	Number / Object	-	≥768px responsive grid, can be a grid number or an object containing other properties (tablet). TS type: number | BaseColProps	N
span	Number	12	Number of grid columns occupied. When 0, it is equivalent to display: none	N
tag	String	div	Custom element tag	N
xl	Number / Object	-	≥1400px responsive grid, can be a grid number or an object containing other properties (medium desktop). TS type: number | BaseColProps	N
xs	Number / Object	-	<768px responsive grid, can be a grid number or an object containing other properties (mobile). TS type: number | BaseColProps.Detailed type definition	N
xxl	Number / Object	-	≥1880px responsive grid, can be a grid number or an object containing other properties (large desktop). TS type: number | BaseColProps	N

Layout Examples

Basic Layout

Single Column Layout (Default)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    // If col is not set, default span: 12, occupies half width
}

Two Column Layout

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

Three Column Layout

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

Offset Layout

Using offset to Set Left Offset

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

Responsive Layout

Basic Responsive

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        xs: 12,  // <768px occupies full row
        sm: 6,   // ≥768px occupies half
        md: 4,   // ≥992px occupies 1/3
        lg: 3,   // ≥1200px occupies 1/4
        xl: 2,   // ≥1400px occupies 1/6
        xxl: 2,  // ≥1880px occupies 1/6
    }
}

Flex Layout

Using flex Property

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

Using Row and Col Components for Layout

You can also use row and col components to manually control layout instead of rule.col.

Row Props

Name	Type	Default	Description	Required
align	String	top	Vertical alignment. Options: top/middle/bottom	N
gutter	Number / Object / Array	0	Grid spacing, example: { xs: 8, sm: 16, md: 24}. When the data type is Number or Object, it is used to specify horizontal spacing. When the data type is Array, the first parameter is horizontal spacing, the second parameter is vertical spacing, [horizontal spacing, vertical spacing]. TS type: number | GutterObject | Array<GutterObject | number>.Detailed type definition	N
justify	String	start	Horizontal arrangement in flex layout. Options: start/end/center/space-around/space-between	N
tag	String	div	Custom element tag	N

Basic Usage

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

Multi-Row Layout

const rule = [
    {
        type: 'row',
        props: {
            gutter: 16,  // Set grid spacing
        },
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 6 },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 6 },
                native: true,
                children: [
                    {
                        type: 'select',
                        title: 'Product Category',
                        field: 'category',
                    }
                ]
            }
        ]
    },
    {
        type: 'row',
        props: {
            gutter: 16,
        },
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 4 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 4 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Stock',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 4 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: 'Is Listed',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

Tips

• When using row and col components, you need to set native: true to generate components as-is
• TDesign uses a 12-column grid system (default span: 12)
• Supports flex property for Flex layout
• You can set properties such as gutter, justify, align through row's props