---
name: mui-grid
description: Anleitungen und Regeln für MUI Grid v2 im micasAI Frontend. Verwende diesen Skill immer wenn du Grid-Layouts erstellst oder bearbeitest, Layout-Komponenten hinzufügst, responsive Breakpoints setzt, oder wenn Grid-bezogene Fehlermeldungen auftreten. PFLICHT vor jeder Änderung an Grid-Layouts.
---

# MUI Grid v2 – Regeln für micasAI

Das gesamte micasAI Frontend nutzt **MUI Grid v2**. GridLegacy ist vollständig entfernt.

## Die 3 wichtigsten Regeln

1. **Kein `item` Prop** – existiert nicht mehr, einfach weglassen
2. **`size` Prop** statt Breakpoint-Props: `<Grid size={{ xs: 12, md: 6 }}>`
3. **Kein `direction="column"`** → stattdessen `<Stack spacing={...}>`

## Import

```jsx
import Grid from "@mui/material/Grid";
// oder
import { Grid } from "@mui/material";
```

## Vorher / Nachher

```jsx
// ❌ ALT (GridLegacy)
<Grid item xs={12} md={6} zeroMinWidth>

// ✅ NEU (Grid v2)
<Grid size={{ xs: 12, md: 6 }}>
```

```jsx
// ❌ ALT
<Grid xs={6}>

// ✅ NEU
<Grid size={6}>
```

```jsx
// ❌ ALT – Auto-grow
<Grid xs>

// ✅ NEU
<Grid size="grow">
```

## Responsive Layouts

```jsx
<Grid container spacing={2}>
  <Grid size={{ xs: 12, sm: 6, md: 4 }}>
    <Item />
  </Grid>
</Grid>
```

## Spacing

```jsx
// Einheitlich
<Grid container spacing={2}>

// Unterschiedlich nach Achse
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
```

## Vertikales Stacking → Stack verwenden

```jsx
// ❌ NICHT SO
<Grid container direction="column">

// ✅ SO
import { Stack } from '@mui/material';
<Stack spacing={2}>
  <Item />
  <Item />
</Stack>
```

## Container volle Breite

```jsx
<Grid container sx={{ width: '100%' }}>
// oder bei flex parent:
<Grid container sx={{ flexGrow: 1 }}>
```

## Offset

```jsx
<Grid size={{ xs: 6, md: 4 }} offset={{ xs: 3, md: 0 }}>
```

## Zentriertes Element

```jsx
<Grid container spacing={2} minHeight={160}>
  <Grid display="flex" justifyContent="center" alignItems="center" size="grow">
    <Avatar />
  </Grid>
</Grid>
```