MUI Grid Explicado com Exemplos Reais: Layouts, Formulários e Painéis

O Material UI (MUI) oferece um poderoso sistema de componentes Grid para construir layouts responsivos em React. Mas pode ser confuso no início — especialmente com a sobreposição entre o Grid usado para layout e o DataGrid usado para exibição de dados. Neste artigo, vamos explicar como usar o sistema Grid do MUI de forma eficaz, com exemplos reais que você pode aplicar a formulários, painéis e muito mais.

O que é o MUI Grid?

O MUI fornece dois tipos de componentes de grid:

• Grid (Layout) do @mui/material ou @mui/system: usado para criar layouts de página usando um sistema flexbox de 12 colunas.
• Data Grid do @mui/x-data-grid: usado para renderizar tabelas, frequentemente com paginação, ordenação, filtragem, etc.

Saber quando usar qual é fundamental:

• Use Grid para controlar layout e posicionamento.
• Use DataGrid quando estiver exibindo dados estruturados como tabelas.

Layout Básico com MUI Grid

Container vs. Item

O MUI Grid usa um modelo de container + item:

<Grid container spacing={2}>
  <Grid item xs={6}>Esquerda</Grid>
  <Grid item xs={6}>Direita</Grid>
</Grid>

Como Funcionam as Colunas

O grid divide a largura em 12 colunas. xs={6} ocupa metade, xs={4} ocupa um terço, e assim por diante.

Espaçamento e Lacunas

Use spacing={n} no container para adicionar preenchimento consistente entre os itens.

Layouts Responsivos com Grid

Pontos de Quebra

O Grid suporta pontos de quebra com xs, sm, md, lg, xl.

<Grid item xs={12} sm={6} md={4}>
  Caixa responsiva
</Grid>

Esta caixa ocupa a largura total em telas pequenas, metade em médias e um terço em telas grandes.

Grids Aninhados

Os Grids podem ser aninhados tornando um item também um container:

<Grid item xs={12}>
  <Grid container spacing={1}>
    <Grid item xs={6}>Aninhado A</Grid>
    <Grid item xs={6}>Aninhado B</Grid>
  </Grid>
</Grid>

Padrões de UI Reais

Layout de Formulário

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField label="Nome" fullWidth />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField label="Sobrenome" fullWidth />
  </Grid>
</Grid>

Cartões de Painel

<Grid container spacing={2}>
  <Grid item xs={12} md={4}>
    <Paper>Cartão de Estatísticas</Paper>
  </Grid>
  <Grid item xs={12} md={8}>
    <Paper>Área de Gráfico</Paper>
  </Grid>
</Grid>

Barra Lateral + Conteúdo

<Grid container>
  <Grid item xs={12} md={3}>
    <Sidebar />
  </Grid>
  <Grid item xs={12} md={9}>
    <MainContent />
  </Grid>
</Grid>

MUI Grid vs Data Grid

Recurso Grid (@mui/material) DataGrid (@mui/x-data-grid) Propósito Layout de página Exibição de dados tabulares Contagem de colunas Sistema de 12 colunas Colunas definidas por coluna de dados Caso de uso Formulários, painéis, layouts Tabelas, planilhas, relatórios Pontos de quebra Sim Não (tratado via redimensionamento do container)

Exemplo de uso do DataGrid:

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Nome', width: 150 },
];

const rows = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

<DataGrid rows={rows} columns={columns} autoHeight />

Armadilhas Comuns e Soluções

1. Problemas de Overflow ou Alinhamento

• Sempre envolva itens em um container.
• Certifique-se de que os valores xs, sm, etc. somem 12 (ou menos).

2. Barras de Rolagem Indesejadas

• Use spacing={2} em vez de margin ou padding manual.

3. Itens do Grid Esticando Inesperadamente

• Envolva o texto em Box, Paper ou similar para controlar largura/altura.

Conclusão

O sistema Grid do MUI oferece uma maneira poderosa de construir layouts responsivos usando uma API simples e flexível. Ao dominar a estrutura de container/item, pontos de quebra e padrões de layout comuns, você pode construir UIs robustas sem precisar de CSS personalizado.

Perguntas Frequentes