Anidamiento de cuadrícula de React Suite

React Suite es una biblioteca front-end para la plataforma intermedia y los productos back-end. El componente React Suite Grid proporciona un diseño de cuadrícula que ofrece 24 cuadrículas, ayuda en la capacidad de respuesta. Al anidar , un elemento de cuadrícula se convierte en una cuadrícula en sí.

Sintaxis:

<Grid>
    <Row>
        <Col> ... </Col>
        ...
    </Row>
</Grid>

Requisito previo: 

• Introducción e instalación reactJS
• Componente de fila de React Suite

Creación de la aplicación React y la instalación del módulo:

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app.

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo 1: estamos importando los componentes Grid, Row y Col de «rsuite» y, para aplicar los estilos predeterminados de los componentes, estamos importando «rsuite/dist/rsuite.min.css» .

Dentro de la etiqueta Grid, estamos agregando otra etiqueta Grid, estamos agregando elementos de tramo y agregamos algo de estilo a los elementos. Y nuevamente agregamos otra etiqueta Grid, le agregamos elementos de intervalo.

import { Grid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4>React Suite Grid Nesting</h4>
            <Grid style={{
                backgroundColor: "green",
                padding: 20
            }}>
                <Grid style={{
                    backgroundColor: "violet",
                    padding: 10
                }}>
                    <span style={{
                        backgroundColor: "yellow",
                        padding: 10
                    }}>1</span>
                    <span style={{
                        backgroundColor: "skyblue",
                        padding: 10
                    }}>2</span>
                </Grid>
                <Grid style={{
                    backgroundColor: "blueviolet",
                    padding: 10
                }}>
                    <span style={{
                        backgroundColor: "lightgreen",
                        padding: 10
                    }}>3</span>
                    <span style={{
                        backgroundColor: "orange",
                        padding: 10
                    }}>4</span>
                </Grid>
            </Grid>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Ejemplo 2: En este ejemplo, estamos formando un patrón simple mediante el anidamiento.

import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4>React Suite Grid Nesting</h4>
            <Grid style={{
                backgroundColor: "green",
                padding: 20, width: 100
            }}>
                <Row style={{
                    backgroundColor: "red",
                    padding: 10
                }}>
                    <Row style={{
                        backgroundColor: "black",
                        padding: 10
                    }}>
                        <Row style={{
                            backgroundColor: "white",
                            padding: 10
                        }}>
                            <Row style={{
                                backgroundColor: "yellow",
                                padding: 10
                            }}>
                                <Col style={{
                                    backgroundColor: "violet",
                                    padding: 10
                                }}></Col>
                            </Row>
                        </Row>
                    </Row>
                </Row>
            </Grid>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Referencia:  https://rsuitejs.com/components/grid/#nesting