MUI Grid expliqué avec des exemples concrets : Mises en page, Formulaires et Tableaux de bord

Material UI (MUI) offre un système de composants Grid puissant pour créer des mises en page responsives dans React. Mais cela peut être déroutant au début — particulièrement avec le chevauchement entre le Grid utilisé pour la mise en page et le DataGrid utilisé pour l’affichage des données. Dans cet article, nous allons examiner comment utiliser efficacement le système Grid de MUI, avec des exemples concrets que vous pouvez appliquer aux formulaires, tableaux de bord, et plus encore.

Qu’est-ce que le MUI Grid ?

MUI fournit deux types de composants de grille :

• Grid (Mise en page) de @mui/material ou @mui/system : utilisé pour créer des mises en page utilisant un système flexbox à 12 colonnes.
• Data Grid de @mui/x-data-grid : utilisé pour afficher des tableaux, souvent avec pagination, tri, filtrage, etc.

Savoir quand utiliser lequel est essentiel :

• Utilisez Grid pour contrôler la mise en page et le positionnement.
• Utilisez DataGrid lorsque vous affichez des données structurées comme des tableaux.

Mise en page de base avec MUI Grid

Container vs. Item

MUI Grid utilise un modèle container + item :

<Grid container spacing={2}>
  <Grid item xs={6}>Gauche</Grid>
  <Grid item xs={6}>Droite</Grid>
</Grid>

Comment fonctionnent les colonnes

La grille divise la largeur en 12 colonnes. xs={6} prend la moitié, xs={4} prend un tiers, et ainsi de suite.

Espacement et écarts

Utilisez spacing={n} sur le container pour ajouter un rembourrage cohérent entre les éléments.

Mises en page responsives avec Grid

Points de rupture

Grid prend en charge les points de rupture avec xs, sm, md, lg, xl.

<Grid item xs={12} sm={6} md={4}>
  Boîte responsive
</Grid>

Cette boîte prend toute la largeur sur les petits écrans, la moitié sur les écrans moyens, et un tiers sur les grands écrans.

Grilles imbriquées

Les grilles peuvent être imbriquées en faisant d’un item également un container :

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

Modèles d’interface utilisateur concrets

Mise en page de formulaire

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField label="Prénom" fullWidth />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField label="Nom" fullWidth />
  </Grid>
</Grid>

Cartes de tableau de bord

<Grid container spacing={2}>
  <Grid item xs={12} md={4}>
    <Paper>Carte de statistiques</Paper>
  </Grid>
  <Grid item xs={12} md={8}>
    <Paper>Zone de graphique</Paper>
  </Grid>
</Grid>

Barre latérale + Contenu

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

MUI Grid vs Data Grid

Fonctionnalité Grid (@mui/material) DataGrid (@mui/x-data-grid) Objectif Mise en page Affichage de données tabulaires Nombre de colonnes Système à 12 colonnes Colonnes définies par colonne de données Cas d’utilisation Formulaires, tableaux de bord, mises en page Tables, feuilles de calcul, rapports Points de rupture Oui Non (géré via le redimensionnement du conteneur)

Exemple d’utilisation de DataGrid :

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

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

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

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

Pièges courants et solutions

1. Problèmes de débordement ou d’alignement

• Enveloppez toujours les éléments dans un container.
• Assurez-vous que les valeurs xs, sm, etc. totalisent 12 (ou moins).

2. Barres de défilement indésirables

• Utilisez spacing={2} au lieu de margin ou padding manuels.

3. Étirement inattendu des éléments de la grille

• Enveloppez le texte dans Box, Paper, ou similaire pour contrôler la largeur/hauteur.

Conclusion

Le système Grid de MUI offre un moyen puissant de construire des mises en page responsives en utilisant une API simple et flexible. En maîtrisant la structure container/item, les points de rupture et les modèles de mise en page courants, vous pouvez créer des interfaces utilisateur robustes sans avoir besoin de CSS personnalisé.

FAQ