Vue ResponsiveBox - cols

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

Type:

Array<Object>

See Also

baseSize

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

Type:

Number

|

String

Default Value: 0
Accepted Values: 'auto'

Use the Mode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Auto.

ratio

The column width ratio.

Type:

Number

Default Value: 1

screen

Decides on which screens the current column is rendered.

Type:

String

Default Value: undefined

Before rendering the column, the widget 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 option 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 option 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