React ResponsiveBox - Arrange Layout Elements

All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.

HTML
CSS
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import ResponsiveBox, { Row, Col } from 'devextreme-react/responsive-box';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <ResponsiveBox>
  • <Row ratio={1}/> {/* Header */}
  • <Row ratio={2}/> {/* Content */}
  • <Row ratio={0.7}/> {/* Footer */}
  • <Col ratio={0.5} screen="md lg"/> {/* Left-side bar */}
  • <Col ratio={2}/> {/* Content */}
  • <Col ratio={0.5} screen="md lg"/> {/* Right-side bar */}
  • </ResponsiveBox>
  • );
  • }
  • }
  •  
  • export default App;
  • html, body { height: 100%; }

Every layout element has the location property that allows you to relocate the element within the layout grid or hide it on screens of a specific size. For example, in the following code, the "Left-Side Bar" and "Right-Side Bar" elements are present only on medium and large screens. All the other elements have individual settings for screens of each size.

HTML
CSS
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import ResponsiveBox, { Row, Col, Item, Location } from 'devextreme-react/responsive-box';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <ResponsiveBox>
  • {/* Layout grid is configured here */}
  •  
  • <Item>
  • <Location screen="md lg" row={0} col={0} colspan={3}/>
  • <Location screen="xs sm" row={0} col={0}/>
  • <div className="header item">
  • <p>Header</p>
  • </div>
  • </Item>
  •  
  • <Item>
  • <Location screen="md lg" row={1} col={1}/>
  • <Location screen="xs sm" row={1} col={0}/>
  • <div className="content item">
  • <p>Content</p>
  • </div>
  • </Item>
  •  
  • <Item>
  • <Location screen="md lg" row={1} col={0}/>
  • <div className="left-side-bar item">
  • <p>Left Bar</p>
  • </div>
  • </Item>
  •  
  • <Item>
  • <Location screen="md lg" row={1} col={2}/>
  • <div className="right-side-bar item">
  • <p>Right Bar</p>
  • </div>
  • </Item>
  •  
  • <Item>
  • <Location screen="md lg" row={2} col={0} colspan={3}/>
  • <Location screen="xs sm" row={2} col={0}/>
  • <div className="footer item">
  • <p>Footer</p>
  • </div>
  • </Item>
  • </ResponsiveBox>
  • );
  • }
  • }
  •  
  • export default App;
  • html, body { height: 100%; }
  • #responsiveBox div {
  • font-size: 16px;
  • padding-top: 10px;
  • text-align: center;
  • }
  • .item { height: 100%; }
  • .header { background: #f39e6c }
  • .content { background: #f5e5a6 }
  • .left-side-bar { background: #94d7c7 }
  • .right-side-bar { background: #77c7e7 }
  • .footer { background: #7b9bcf }

If on some screens, all elements should be arranged in a single column, assign the size qualifiers of these screens to the singleColumnScreen property. In this case, the layout grid will be ignored in favor of the single-column layout, and all layout elements will have equal heights.

HTML
CSS
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import ResponsiveBox, { Row, Col } from 'devextreme-react/responsive-box';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <ResponsiveBox ...
  • singleColumnScreen="xs sm"> {/* Single-column layout on small and extra small screens */}
  • <Row ... /> {/* Ignored */}
  • <Col ... /> {/* Ignored */}
  • {/* ... */}
  • </ResponsiveBox>
  • );
  • }
  • }
  •  
  • export default App;
  • html, body { height: 100%; }
See Also