coastdigitalgroup/coastai-skills

Responsives Grid-System

Zweck

Der Skill „Responsives Grid-System“ bietet eine strukturierte Grundlage für die Organisation von Inhalten auf einer Webseite. Durch die Verwendung eines einheitlichen Systems aus Spalten, Abständen und Rändern wird visuelle Ausrichtung sichergestellt, die Hierarchie gewahrt und der Übergang von Designs über verschiedene Bildschirmgrößen (Mobil, Tablet, Desktop) vereinfacht.

Anwendungsfälle

• Entwurf des strukturellen Layouts einer neuen Website oder Anwendung.
• Erstellung eines UI-Kits oder einer Komponentenbibliothek für Designsysteme.
• Organisation komplexer Inhalte wie Dashboards oder datenintensiver Oberflächen.
• Sicherstellung eines einheitlichen vertikalen Rhythmus und horizontaler Ausrichtung über mehrere Seiten hinweg.

Wann NICHT zu verwenden

• Experimentelle/Brutalistische Designs: Wenn das visuelle Ziel darin besteht, absichtlich Standard-Layoutkonventionen für einen künstlerischen Effekt zu brechen.
• Einfache Einzelseiten: Wenn der Inhalt so minimal ist (z. B. ein einzelnes zentriertes Formular), dass ein vollständiges Rastersystem unnötigen Overhead verursacht.
• Umgebungen mit fester Breite: Wenn die Ausgabe ausschließlich für ein nicht responsives Medium bestimmt ist (obwohl ein Raster dennoch für die Ausrichtung nützlich sein kann).

Eingaben

Um ein responsives Rastersystem zu erstellen, benötigen Sie:

1. Geräte-Breakpoints: Die Bildschirmbreiten, bei denen sich das Layout ändert (z. B. 600px, 900px, 1200px).
2. Spaltenanzahl: Anzahl der vertikalen Spuren für Inhalte an jedem Breakpoint (Standard: 12 für Desktop, 4 für Mobil).
3. Abstandsbreite (Gutter Width): Der Abstand zwischen den Spalten (z. B. 16px, 24px).
4. Äußere Ränder (Outer Margins): Der Abstand an den linken und rechten Rändern des Viewports (z. B. 20px auf Mobilgeräten, 5 % oder feste maximale Breite auf dem Desktop).
5. Inhaltsanforderungen: Eine Liste der Komponenten und ihrer relativen Priorität/Größe.

Ausgaben

1. Raster-Spezifikation: Eine Definition von Spalten, Abständen und Rändern für jeden Haupt-Breakpoint.
2. Layout-Karte: Eine visuelle oder beschreibende Anleitung, die zeigt, wie Komponenten Spalten in verschiedenen Größen überspannen.
3. Implementierungslogik: CSS-Eigenschaften (Grid oder Flexbox) zur Realisierung des Systems.

Arbeitsablauf

1. Breakpoints definieren

Wählen Sie die wichtigsten Bildschirmbreiten aus, bei denen sich Ihr Layout anpassen muss. Gängige Skala:

• Mobil: 0 - 599px
• Tablet: 600px - 899px
• Desktop: 900px+ (mit einem Container mit maximaler Breite von etwa 1200px-1440px)

2. Spalten- und Abstandsparameter festlegen

Bestimmen Sie die „innere Logik" des Rasters.

• Mobil: 4 Spalten, 16px Abstände, 16px Ränder.
• Tablet: 8 Spalten, 24px Abstände, 32px Ränder.
• Desktop: 12 Spalten, 24px Abstände, automatische Ränder (zentrierter Container).

3. Container-Verhalten festlegen

Entscheiden Sie, ob das Raster Fließend (als Prozentsatz des Viewports skalierend), Fest (bleibt bis zum nächsten Breakpoint auf einer bestimmten Breite) oder Adaptiv (eine Mischung) ist. Empfehlung: Verwenden Sie ein fließendes Raster mit einer festen max-width, dimensioniert mit clamp() (z. B. max-width: clamp(320px, 90vw, 1440px)), damit der Container sanft skaliert, anstatt an Breakpoints zu springen.

4. Inhalt dem Raster zuordnen

Weisen Sie Komponenten zu, bestimmte Spaltenanzahlen mit CSS Grid zu überspannen (grid-template-columns: repeat(12, 1fr) mit grid-column: span N), nicht mit Float- oder Inline-Block-Hacks. Beispiel: Eine Seitenleiste könnte auf dem Desktop 3 Spalten überspannen (12-Spalten-Raster), während der Hauptinhalt 9 Spalten überspannt. Auf Mobilgeräten würden beide alle 4 Spalten überspannen (übereinander gestapelt).

Verwenden Sie für Komponenten, die innerhalb einer Rasterzelle verschachtelt sind und an den Spuren des übergeordneten Rasters ausgerichtet werden müssen (z. B. der interne Header/Body/Footer einer Karte, der mit benachbarten Karten ausgerichtet ist), subgrid (grid-template-columns: subgrid oder grid-template-rows: subgrid), anstatt ein neues unabhängiges Raster neu zu deklarieren.

Wenn das interne Layout einer Komponente vom eigenen verfügbaren Platz abhängt und nicht vom Viewport (z. B. eine Karte, die basierend auf der Breite ihres Containers und nicht des Bildschirms von 1 auf 2 Spalten umbrechen soll), verwenden Sie eine Container Query (container-type: inline-size auf dem Wrapper, @container (min-width: …) auf dem Kind) anstelle einer Media Query.

5. Stapelung und Reihenfolge definieren

Legen Sie fest, wie sich Elemente bewegen, wenn der Bildschirm schrumpft. Normalerweise stapeln sich Elemente auf der linken Seite über Elementen auf der rechten Seite. Verwenden Sie logische Eigenschaften (margin-inline, padding-block) für Rasterabstände und -ränder, damit sich das System automatisch an RTL-Layouts anpasst, ohne separate Überschreibungen.

Entscheidungsregeln

• Die 12-Spalten-Regel: Verwenden Sie ein 12-Spalten-Raster für den Desktop, da es durch 2, 3, 4 und 6 teilbar ist und maximale Flexibilität bietet.
• Konsistenz: Verwenden Sie innerhalb eines einzelnen Breakpoints dieselbe Abstandsbreite, um die Ausrichtung beizubehalten.
• Mobile First: Entwerfen Sie immer zuerst das 4-Spalten-Layout für Mobilgeräte, um sicherzustellen, dass der Kerninhalt priorisiert wird.
• Die „Sicherheitszone": Stellen Sie sicher, dass die äußeren Ränder groß genug sind, um zu verhindern, dass Inhalte die Bildschirmränder auf Mobilgeräten berühren.
• Viewport vs. Container: Verwenden Sie Media Queries für seitenweite, vom Viewport gesteuerte Layoutverschiebungen (z. B. die gesamte Spaltenanzahl). Verwenden Sie Container Queries, wenn sich eine Komponente unabhängig vom Viewport an ihre eigene Boxgröße anpassen muss (z. B. dieselbe Kartenkomponente, die in einer Seitenleiste anders umfließt als in einem vollbreiten Abschnitt).

Einschränkungen

• Barrierefreiheit: Stellen Sie sicher, dass beim Schrumpfen von Spalten der Text lesbar bleibt und die Antippziele (Schaltflächen) groß genug bleiben – WCAG 2.2 (2.5.8) legt eine absolute Untergrenze von 24x24px fest, wobei 44x44px für primäre Aktionen bevorzugt werden.
• Responsivität: Kein Element sollte eine feste Pixelbreite haben, die die mobile Viewport-Breite überschreitet (horizontales Scrollen vermeiden).
• Hierarchie: Verwenden Sie das Raster, um die Bedeutung zu verstärken; wichtigere Elemente sollten typischerweise mehr Spalten überspannen oder höher im Stapel erscheinen.

Häufige Fehlermuster

• Inkonsistente Abstände: Verwendung unterschiedlicher Abstände zwischen verschiedenen Spalten, was die visuelle „Linie" unterbricht.
• Abstandsloses Design: Platzieren von Inhalten direkt nebeneinander ohne Atempause (es sei denn, es ist für Bilder beabsichtigt).
• Überkomplexität: Erstellung zu vieler Breakpoints für kleine Anpassungen, was zu nicht wartbarem CSS führt.
• Ignorieren des „Dazwischen": Testen nur bei 320px und 1440px, aber ignorieren, wie das Layout bei 800px oder 1024px aussieht.

Validierungskriterien

• Inhalte sind perfekt an den vertikalen Linien des Rasters ausgerichtet.
• Es erscheinen keine horizontalen Bildlaufleisten bei einer Viewport-Breite von 320px bis 2560px.
• Der Übergang zwischen Breakpoints wirkt logisch und der Inhalt bleibt lesbar.
• Abstände und Ränder bleiben auf der gesamten Seite konsistent.
• Das System wird mit relativen Einheiten (%, fr, rem) anstelle von fest codierten Pixeln für Spaltenbreiten implementiert.
• Container Queries werden (anstelle von Viewport-Media-Queries) für Komponenten verwendet, deren Layout von ihrer eigenen Box-Größe abhängen soll.
• Antippziele erfüllen mindestens das WCAG 2.2 Minimum von 24x24px.