IU de material e sistema de grade

Estou brincando um pouco com o Material-UI . Existem opções para criar um layout de grade (como em Bootstrap )?

Se não, qual é a forma de adicionar essa funcionalidade?

Há um componente GridList, mas acho que tem um propósito diferente.

O Material UI implementou seu próprio layout Flexbox por meio do componente Grid .

Parece que eles inicialmente queriam se manter puramente como uma biblioteca de 'componentes'. Mas um dos desenvolvedores principais decidiu que era muito importante não ter o seu próprio . Agora ele foi incorporado ao código principal e foi lançado com a v1.0.0 .

Você pode instalá-lo via:

npm install @material-ui/core

Agora está na documentação oficial com exemplos de código .

A partir da descrição das especificações do material design :

Listas de grade são uma alternativa às visualizações de lista padrão. As listas de grade são diferentes das grades usadas para layouts e outras apresentações visuais.

Se você está procurando uma biblioteca de componentes Grid muito leve, estou usando React-Flexbox-Grid , a implementação de flexboxgrid.cssno React.

Além disso, React-Flexbox-Grid funcionou bem com material-ui e react-toolbox (a implementação alternativa de material design).

Procurei uma resposta para isso e a melhor maneira que encontrei foi usar o Flex e o estilo embutido em diferentes componentes.

Por exemplo, para fazer dois componentes de papel dividirem minha tela inteira em 2 componentes verticais (em uma proporção de 1: 4), o código a seguir funciona bem.

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>
    )
  }
}

Agora, com mais alguns cálculos, você pode dividir facilmente seus componentes em uma página.

Leituras adicionais sobre flex

Espero que não seja tarde demais para dar uma resposta.

Eu também estava procurando por um bootstrap simples, robusto, flexível e altamente customizável como o sistema react grid para usar em meus projetos.

O melhor que sei é react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid dá a você o poder de personalizar todos os aspectos do seu sistema de grade, ao mesmo tempo que possui padrões embutidos que provavelmente se adequam a qualquer projeto

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>
);

O jeito que eu faço é ir para http://getbootstrap.com/customize/ e apenas marcar "sistema de grade" para fazer o download. Existem bootstrap-theme.csse bootstrap.cssnos arquivos baixados, e eu só preciso do último.

Desta forma, posso usar o sistema de grade do Bootstrap, com todo o resto do Material UI.

Eu apenas uso https://react-bootstrap.github.io/ para Layout Responsivo e Material-ui para todos os componentes

Tive dificuldade em encontrar uma estrutura de IU que implementasse os padrões do Material Design para comportamento responsivo, então criei dois pacotes que implementam um sistema de grade para o Material Design:

1. Uma estrutura CSS: material-responsive-grid
2. Um conjunto de componentes React que implementam essa estrutura: reat-material-responsive-grid .

Esses pacotes seguem os padrões de IU responsiva descritos pelo Google. Todos os tamanhos de viewport especificados em seus padrões são suportados levando-se em consideração as medianizes adequadas, o número recomendado de colunas e até mesmo o comportamento de um layout que excede 1600 dp. Ele deve se comportar conforme recomendado para cada dispositivo no guia de métricas do dispositivo .

Abaixo é feito puramente pelo sistema MUI Grid ,

Com o código abaixo,

// 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 é uma questão antiga, mas o google me traz aqui. Depois de uma pequena pesquisa, encontrei um bom pacote: https://www.npmjs.com/package/react-grid-system

Acho que é o melhor, fácil de usar e leve.

Aqui está um exemplo de sistema de grade com material-ui que é semelhante ao 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>