Vue ResponsiveBox - cols

Specifies the collection of columns for the grid used to position layout elements.

Selector: DxCol
Type:

Array<Object>

See Also

baseSize

The column's base width. Calculated automatically when the singleColumnScreen property arranges all elements in a single column.

Selector: base-size
Type:

Number

|

String

Default Value: 0

NOTE
You can use the Mode type with number and string.
See Also

ratio

The column width ratio.

Type:

Number

Default Value: 1

See Also

screen

Decides on which screens the current column is rendered.

Type:

String

Default Value: undefined

Before rendering the column, the UI component considers the screen's width. If the width matches the specified size qualifier, the column will be rendered. There are four size qualifiers in all. The screen property accepts one or several of them separated by a space.

Size Qualifier Description
xs Stands for "extra small". Screens with width less than 768 pixels.
sm Stands for "small". Screens with width between 768 and 992 pixels.
md Stands for "medium". Screens with width between 992 and 1200 pixels.
lg Stands for "large". Screens with width more than 1200 pixels.
NOTE
When this property is undefined, the column is rendered on all screens.
See Also

shrink

A factor that defines how much a column width shrinks relative to the rest of the columns in the container.

Type:

Number

Default Value: 1

See Also