Cuadrícula CSS React Rebass

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar CSS Grid en React rebass. CSS Grid es un componente importante que se requiere en cada desarrollo.

CSS Grid es útil para organizar elementos secundarios directos sin tener que aplicarles estilos adicionales. Cree un extensor de componente Box que envuelva otros elementos para aplicar un diseño de cuadrícula.

Sintaxis:

<Box sx={{ display:'grid', gridGap: 4 }}> CSS Grid</Box>

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

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

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

cd foldername

Paso 3: Instale React Rebass en su directorio dado.

npm i rebass

Estructura del proyecto: Tendrá el siguiente aspecto.

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

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar CSS Grid.

import React from "react";
import { Box, Heading, Text } from "rebass";
  
const gfg = () => {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>React Rebass CSS Grid</h4>
      <Box
        sx={{
          display: 'grid',
          gridGap: 4,
        }}>
        <Heading p={3} color='red' bg='green'>
           Grid
        </Heading>
        <Text p={3} color='white' bg='blue'>
           GeeksforGeeks
        </Text>
      </Box>
    </div>
  );
};
  
export default gfg;

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo hacer una cuadrícula basada en columnas.

import React from "react";
import { Box, Heading, Text } from "rebass";
  
const gfg = () => {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>React Rebass CSS Grid</h4>
      <Box
        sx={{
          display: 'grid',
          gridGap: 4,
          gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
        }}>
        <Heading p={3} color='red' bg='green'>
          Grid
        </Heading>
        <Text p={3} color='white' bg='blue'>
          GeeksforGeeks
        </Text>
      </Box>
    </div>
  );
};
  
export default gfg;

Producción:

Referencia: https://rebassjs.org/guides/css-grid