Material UI y sistema de cuadrícula

Estoy jugando un poco con Material-UI . ¿Hay opciones para crear un diseño de cuadrícula (como en Bootstrap )?

Si no es así, ¿cuál es la forma de agregar esta funcionalidad?

Hay un componente GridList pero supongo que tiene un propósito diferente.

Material UI ha implementado su propio diseño de Flexbox a través del componente Grid .

Parece que inicialmente querían mantenerse como una biblioteca puramente de 'componentes'. Pero uno de los desarrolladores principales decidió que era demasiado importante no tener uno propio . Ahora se ha fusionado con el código principal y se lanzó con la v1.0.0 .

Puede instalarlo a través de:

npm install @material-ui/core

Ahora está en la documentación oficial con ejemplos de código .

De la descripción de las especificaciones de diseño de materiales :

Las listas de cuadrícula son una alternativa a las vistas de lista estándar. Las listas de cuadrículas son distintas de las cuadrículas que se usan para diseños y otras presentaciones visuales.

Si está buscando una biblioteca de componentes Grid mucho más liviana, estoy usando React-Flexbox-Grid , la implementación de flexboxgrid.cssReact.

Además de eso, React-Flexbox-Grid funcionó muy bien con material-ui y react-toolbox (la implementación alternativa de diseño de material).

Busqué una respuesta a esto y la mejor manera que encontré fue usar Flex y el estilo en línea en diferentes componentes.

Por ejemplo, para hacer que dos componentes de papel dividan mi pantalla completa en 2 componentes verticales (en una proporción de 1: 4), el siguiente código funciona bien.

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

Ahora, con algunos cálculos más, puede dividir fácilmente sus componentes en una página.

Lectura adicional sobre flex

Espero que no sea demasiado tarde para dar una respuesta.

También estaba buscando un sistema de bootstrap simple, robusto, flexible y altamente personalizable como react grid para usar en mis proyectos.

Lo mejor que conozco es react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid le da el poder de personalizar cada aspecto de su sistema de red, mientras que al mismo tiempo tiene incorporados valores predeterminados que probablemente se adapten a cualquier proyecto

Uso

npm install react-pure-grid --save

-

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

La forma en que lo hago es ir a http://getbootstrap.com/customize/ y solo marcar "sistema de cuadrícula" para descargar. Hay bootstrap-theme.cssy bootstrap.cssen archivos descargados, y solo necesito este último.

De esta manera, puedo usar el sistema de cuadrícula de Bootstrap, con todo lo demás de Material UI.

Solo uso https://react-bootstrap.github.io/ para el diseño receptivo y Material-ui para todos los componentes

Tuve dificultades para encontrar un marco de interfaz de usuario que implementara los estándares de Material Design para el comportamiento receptivo, por lo que he creado dos paquetes que implementan un sistema de cuadrícula para Material Design:

1. Un marco CSS: material-responsive-grid
2. Un conjunto de componentes de React que implementan ese marco: react-material-responsive-grid .

Estos paquetes siguen los estándares para la interfaz de usuario receptiva descritos por Google. Todos los tamaños de ventana gráfica especificados en sus estándares se admiten teniendo en cuenta las canaletas adecuadas, el número recomendado de columnas e incluso el comportamiento de un diseño que supere los 1600 dp. Debe comportarse como se recomienda para cada dispositivo en la guía de Métricas del dispositivo .

A continuación se realiza mediante un sistema de cuadrícula puramente MUI ,

Con el código a continuación,

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓ CodeSandbox ↓

Esta es una vieja pregunta, pero Google me trae aquí. Después de una pequeña búsqueda encontré un buen paquete: https://www.npmjs.com/package/react-grid-system

Creo que este es el mejor, fácil de usar y ligero.

Aquí hay un ejemplo de sistema de cuadrícula con material-ui que es similar a bootstrap:

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>