DevExtreme React - Create the Layout Grid
All ResponsiveBox elements are arranged against a layout grid defined by the rows and cols arrays. Each object in these arrays configures a single row or column. If you need two sets of equally-sized rows and columns, simply populate these arrays with empty objects.
To set the size of a row/column, use the ratio and baseSize options. The ratio option specifies the size of a row/column in relation to other rows/columns. If you use this option alone, the ResponsiveBox occupies the entire area assigned to it.
If you need to set the size of a row/column in pixels, set the ratio to 0 and specify the baseSize option. In this case, if the ResponsiveBox is bigger than all its elements combined, an area is left unoccupied.
To redistribute the unoccupied area between rows/columns, specify the ratio more than 0. The greater the ratio assigned to a row/column, the bigger the area added to this row/column.
The collections of rows and columns may differ depending on the screen's size qualifier. To specify on which screen types an individual row or column should appear, use the screen option. By default, all rows and columns appear on all screen types.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.