React ResponsiveBox - rows

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

Type:

Array<Object>

See Also

baseSize

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

Type:

Number

|

String

Default Value: 0
Accepted Values: 'auto'

See Also

ratio

The row height ratio.

Type:

Number

Default Value: 1

See Also

screen

Decides on which screens the current row is rendered.

Type:

String

Default Value: undefined

Before rendering the row, the UI component considers the screen's width. If the width matches the specified size qualifier, the row 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 row is rendered on all screens.
See Also

shrink

A factor that defines how much a row height shrinks relative to the rest of the rows in the container.

Type:

Number

Default Value: 1

See Also