Das responsive Layoutraster von Material Design passt sich der Bildschirmgröße und -ausrichtung an und sorgt für Konsistenz über alle Layouts hinweg.
Das [Grid](https://material.io/design/layout/responsive-layout-grid.html) sorgt für visuelle Konsistenz zwischen Layouts und ermöglicht Flexibilität bei einer Vielzahl von Designs. Die responsive UI von Material Design basiert auf einem 12-Spalten-Rasterlayout. > ⚠️ The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/components/data-grid/). ## So funktioniert es Das Rastersystem wird mit der `Grid-` Komponente implementiert: - Es verwendet das [CSS Flexible Box - Modul](https://www.w3.org/TR/css-flexbox-1/) für hohe Flexibilität. - Es gibt zwei Arten von Layouts: *Container* und *Elemente*. - Die Elementbreiten werden in Prozent angegeben. Sie sind daher immer fließend und werden in Bezug auf das übergeordnete Element angepasst. - Elemente haben einen Abstand, um den Abstand zwischen den einzelnen Elementen zu erstellen. - Es gibt fünf Rasterpunkte: xs, sm, md, lg und xl. Wenn Sie **neu sind oder Flexbox nicht gut kennen**, empfehlen wir Ihnen, dies zu lesen: [CSS-Tricks Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). ## Abstände Das responsive Raster konzentriert sich auf konsistente Abstandsbreiten und nicht auf die Spaltenbreite. Die Ränder und Spalten des Materialdesigns folgen einem Grundraster aus **8px** Quadraten. Die Abstandseigenschaft ist eine ganze Zahl zwischen 0 und einschließlich 10. Standardmäßig folgt der Abstand zwischen zwei Rasterelementen einer linearen Funktion: `output(spacing) = spacing * 8px`, z. B. `spacing={2}` erzeugt eine Lücke von 16px. Diese Ausgabetransformationsfunktion kann durch [Verwendung des Themes](/customization/spacing/) angepasst werden. {{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}} ## Fluides Raster Flüssige Raster verwenden Spalten, die den Inhalt skalieren und verkleinern. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically. ### Grundraster Die Spaltenbreiten gelten für alle Rasterpunkte (d.h. `xs` und höher). {{"demo": "pages/components/grid/CenteredGrid.js", "bg": true}} ### Raster mit Rasterpunkten Für einige Spalten sind mehrere Breiten definiert, wodurch sich das Layout am definierten Rasterpunkten ändert. {{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}} ## Interaktive Liste Nachfolgend finden Sie eine interaktive Demo, mit der Sie die visuellen Ergebnisse der verschiedenen Einstellungen untersuchen können: {{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}} ## Automatisches Layout The Auto-layout makes the *items* equitably share the available space. That also means you can set the width of one *item* and the others will automatically resize around it. {{"demo": "pages/components/grid/AutoGrid.js", "bg": true}} ## Komplexes Raster Die folgende Demo folgt nicht der Material Design-Spezifikation, sondern zeigt, wie das Raster zum Erstellen komplexer Layouts verwendet werden kann. {{"demo": "pages/components/grid/ComplexGrid.js", "bg": true}} ## Verschachteltes Raster The `container` and `item` properties are two independent booleans. Sie können kombiniert werden. > Ein Flex **container** ist die Box, die von einem Element mit einer berechneten Anzeige von `flex` oder `Iinline-flex`. In-Flow-Kinder eines Flex-Containers heißen Flex **Elemente** und werden mit dem Flex-Layout-Modell angeordnet. https://www.w3.org/TR/css-flexbox-1/#box-model {{"demo": "pages/components/grid/NestedGrid.js", "bg": true}} ## Einschränkungen ### Negative Abstände Es gibt eine Einschränkung beim negativen Rand, den wir verwenden, um den Abstand zwischen den Elementen zu implementieren. Ein horizontaler Bildlauf wird angezeigt, wenn ein negativer Rand weiter als `` geht. Es gibt 3 verfügbare Problemumgehungen: 1. Nicht die Abstands-Funktion benutzen und den Abstand in Anzeigeraum `spacing={0}` (Standard) setzen. 2. Anwenden von Paddings auf das übergeordnete Element, wobei mindestens der halbe Abstand auf das untergeordnete Element angewendet wird: ```jsx