MUI Grid erklärt mit realen Beispielen: Layouts, Formulare und Dashboards

Material UI (MUI) bietet ein leistungsstarkes Grid-Komponenten-System zum Erstellen responsiver Layouts in React. Es kann jedoch zunächst verwirrend sein – besonders durch die Überschneidung zwischen dem für Layouts verwendeten Grid und dem für die Datenanzeige verwendeten DataGrid. In diesem Artikel werden wir durchgehen, wie man das MUI Grid-System effektiv nutzt, mit realen Beispielen, die Sie auf Formulare, Dashboards und mehr anwenden können.

Was ist das MUI Grid?

MUI bietet zwei Arten von Grid-Komponenten:

• Grid (Layout) aus @mui/material oder @mui/system: wird verwendet, um Seitenlayouts mit einem 12-Spalten-Flexbox-System zu erstellen.
• Data Grid aus @mui/x-data-grid: wird für die Darstellung von Tabellen verwendet, oft mit Paginierung, Sortierung, Filterung usw.

Es ist wichtig zu wissen, wann welches Grid zu verwenden ist:

• Verwenden Sie Grid, um Layout und Positionierung zu steuern.
• Verwenden Sie DataGrid, wenn Sie strukturierte Daten wie Tabellen anzeigen.

Grundlegendes Layout mit MUI Grid

Container vs. Item

MUI Grid verwendet ein Container + Item-Modell:

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

Wie Spalten funktionieren

Das Grid teilt die Breite in 12 Spalten auf. xs={6} nimmt die Hälfte, xs={4} nimmt ein Drittel usw.

Abstände und Lücken

Verwenden Sie spacing={n} im Container, um einheitliche Abstände zwischen Elementen hinzuzufügen.

Responsive Layouts mit Grid

Breakpoints

Grid unterstützt Breakpoints mit xs, sm, md, lg, xl.

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

Diese Box nimmt auf kleinen Bildschirmen die volle Breite ein, auf mittleren die Hälfte und auf großen Bildschirmen ein Drittel.

Verschachtelte Grids

Grids können verschachtelt werden, indem ein Item auch ein Container wird:

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

Reale UI-Muster

Formular-Layout

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

Dashboard-Karten

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

Seitenleiste + Inhalt

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

MUI Grid vs Data Grid

Funktion Grid (@mui/material) DataGrid (@mui/x-data-grid) Zweck Seitenlayout Tabellarische Datenanzeige Spaltenanzahl 12-Spalten-System Spalten pro Datenspalte definiert Anwendungsfall Formulare, Dashboards, Layouts Tabellen, Tabellenkalkulationen, Berichte Breakpoints Ja Nein (über Container-Größenänderung gehandhabt)

Beispiel für DataGrid-Verwendung:

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 />

Häufige Fallstricke und Lösungen

1. Überlauf- oder Ausrichtungsprobleme

• Umschließen Sie Items immer mit einem container.
• Stellen Sie sicher, dass die Werte für xs, sm usw. in Summe 12 (oder weniger) ergeben.

2. Unerwünschte Scrollbalken

• Verwenden Sie spacing={2} anstelle von manuellen margin oder padding.

3. Grid-Items dehnen sich unerwartet aus

• Umschließen Sie Text mit Box, Paper oder ähnlichem, um Breite/Höhe zu kontrollieren.

Fazit

Das Grid-System von MUI bietet eine leistungsstarke Möglichkeit, responsive Layouts mit einer einfachen, flexiblen API zu erstellen. Durch die Beherrschung der Container/Item-Struktur, Breakpoints und gängiger Layout-Muster können Sie robuste Benutzeroberflächen erstellen, ohne benutzerdefiniertes CSS zu benötigen.

FAQs