MUI Grid explicado con ejemplos reales: Layouts, formularios y dashboards

Material UI (MUI) ofrece un potente sistema de componentes Grid para crear layouts responsivos en React. Pero puede resultar confuso al principio — especialmente con la superposición entre el Grid utilizado para el layout y el DataGrid utilizado para mostrar datos. En este artículo, explicaremos cómo usar el sistema Grid de MUI de manera efectiva, con ejemplos reales que puedes aplicar a formularios, dashboards y más.

¿Qué es el MUI Grid?

MUI proporciona dos tipos de componentes de cuadrícula:

• Grid (Layout) de @mui/material o @mui/system: utilizado para crear layouts de página usando un sistema flexbox de 12 columnas.
• Data Grid de @mui/x-data-grid: utilizado para renderizar tablas, a menudo con paginación, ordenación, filtrado, etc.

Saber cuándo usar cada uno es clave:

• Usa Grid para controlar el layout y el posicionamiento.
• Usa DataGrid cuando estás mostrando datos estructurados como tablas.

Layout básico con MUI Grid

Container vs. Item

MUI Grid utiliza un modelo de container + item:

<Grid container spacing={2}>
  <Grid item xs={6}>Left</Grid>
  <Grid item xs={6}>Right</Grid>
</Grid>

Cómo funcionan las columnas

La cuadrícula divide el ancho en 12 columnas. xs={6} toma la mitad, xs={4} toma un tercio, y así sucesivamente.

Espaciado y huecos

Usa spacing={n} en el contenedor para añadir un relleno consistente entre los elementos.

Layouts responsivos con Grid

Puntos de ruptura

Grid soporta puntos de ruptura con xs, sm, md, lg, xl.

<Grid item xs={12} sm={6} md={4}>
  Responsive box
</Grid>

Esta caja ocupa el ancho completo en pantallas pequeñas, la mitad en pantallas medianas y un tercio en pantallas grandes.

Grids anidados

Las cuadrículas pueden anidarse haciendo que un elemento también sea un contenedor:

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

Patrones de UI reales

Layout de formulario

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField label="First Name" fullWidth />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField label="Last Name" fullWidth />
  </Grid>
</Grid>

Tarjetas de dashboard

<Grid container spacing={2}>
  <Grid item xs={12} md={4}>
    <Paper>Stats Card</Paper>
  </Grid>
  <Grid item xs={12} md={8}>
    <Paper>Chart Area</Paper>
  </Grid>
</Grid>

Barra lateral + Contenido

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

MUI Grid vs Data Grid

Característica Grid (@mui/material) DataGrid (@mui/x-data-grid) Propósito Layout de página Visualización de datos tabulares Número de columnas Sistema de 12 columnas Columnas definidas por columna de datos Caso de uso Formularios, dashboards, layouts Tablas, hojas de cálculo, informes Puntos de ruptura Sí No (gestionado mediante redimensionamiento de contenedor)

Ejemplo de uso de DataGrid:

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

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

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

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

Problemas comunes y soluciones

1. Problemas de desbordamiento o alineación

• Siempre envuelve los elementos en un container.
• Asegúrate de que los valores xs, sm, etc. sumen 12 (o menos).

2. Barras de desplazamiento no deseadas

• Usa spacing={2} en lugar de margin o padding manual.

3. Elementos Grid que se estiran inesperadamente

• Envuelve el texto en Box, Paper o similar para controlar el ancho/alto.

Conclusión

El sistema Grid de MUI ofrece una forma potente de construir layouts responsivos usando una API simple y flexible. Al dominar la estructura de contenedor/elemento, los puntos de ruptura y los patrones de layout comunes, puedes construir interfaces de usuario robustas sin necesidad de CSS personalizado.

Preguntas frecuentes