React Suite Grid Offset
React Suite is a front-end library designed for the middle platform and back-end products. React Suite Grid component provides a grid layout that provides 24 grids. It helps in responsiveness. For offset, we pass the following props to the Col Component:
- xxlOffset: It takes a number as a value. It moves the columns to the right for Extra large devices Desktops
- xlOffset: It takes a number as a value. It moves the columns to the right for Extra large devices Desktops
- lgOffset: It takes a number as a value. It moves the columns to the right for Large devices Desktops
- mdOffset: It takes a number as a value. It moves the columns to the right for Medium devices Desktops
- smOffset: It takes a number as a value. It moves the columns to the right for Small devices Tablets
- xsOffset: It takes a number as a value. It moves the columns to the right for Extra small devices Phones
Syntax:
<Grid> <Row> <Col xsOffset={} smOffset={} mdOffset={} lgOffset={}> </Col> </Row> </Grid>
Prerequisite:
- Introduction and installation reactJS
- React Suite Row Component
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: Now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example 1: We are importing the Grid, Row, and Col Components from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.
We are adding the Grid Components, within it, we are adding Row with Col Components and passing different values to the xsOffset, smOffset, and mdOffset.
App.js
import { Grid, Row, Col } from "rsuite" ; import "rsuite/dist/rsuite.min.css" ; function App() { const style = { border: "2px solid green" , textAlign: "center" , }; return ( <div className= "App" > <h4>React Suite Grid Responsive</h4> <Grid> <Row> <Col mdOffset={20} smOffset={12} style={style}> 1 </Col> <Col mdOffset={20} smOffset={6} style={style}> 2 </Col> <Col mdOffset={20} smOffset={3} style={style}> 3 </Col> </Row> </Grid> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are importing the Grid, Row, and Col Components from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.
We are adding two Grid Components. Within it, we are adding Row with Col Components and passing different values to the xsOffset, smOffset, mdOffset, and lgOffset.
App.js
import { Grid, Row, Col } from "rsuite" ; import "rsuite/dist/rsuite.min.css" ; function App() { return ( <div className= "App" > <h4>React Suite Grid Offset</h4> <Grid> <Row> <h6 style={{ textAlign: "center" }}> Row -1</h6> <Col xsOffset={24} smOffset={12} mdOffset={3} lgOffset={12} style={{ backgroundColor: "#A0F962" , width: 100 }} > 1 </Col> <Col xsOffset={24} smOffset={12} mdOffset={3} lgOffset={4} style={{ backgroundColor: "#D97BFC" , width: 100 }} > 2 </Col> <Col xsOffset={24} smOffset={12} mdOffset={3} lgOffset={4} style={{ backgroundColor: "#96FEF2" , width: 100 }} > 3 </Col> <Col xsOffset={24} smOffset={12} mdOffset={3} lgOffset={4} style={{ backgroundColor: "#FC7B96" , width: 100 }} > 4 </Col> </Row> <Row> <h6 style={{ textAlign: "center" }}> Row -2</h6> <Col xsOffset={24} smOffset={6} mdOffset={6} lgOffset={12} style={{ backgroundColor: "#FEAF96" , width: 100 }} > 1 </Col> <Col xsOffset={24} smOffset={6} mdOffset={6} lgOffset={12} style={{ backgroundColor: "#CAFF83" , width: 100 }} > 2 </Col> <Col xsOffset={24} smOffset={6} mdOffset={6} lgOffset={12} style={{ backgroundColor: "#FEED96 " , width: 100 }} > 3 </Col> <Col xsOffset={24} smOffset={6} mdOffset={6} lgOffset={12} style={{ backgroundColor: "#D6D8FF" , width: 100 }} > 4 </Col> </Row> </Grid> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://rsuitejs.com/components/grid/#offset
Contact Us