Das Konzept: Grid & Grid Items
Ein Grid funktioniert nach dem Prinzip einer Eltern-Kind-Beziehung:
Grid (Eltern-Element): Diese Komponente dient als Basis für deine horizontale Unterteilung und sollte immer innerhalb eines Containers platziert werden.
Grid Items (Kind-Elemente): Innerhalb eines Grids bildest du mithilfe von Grid Items einzelne Spalten. Du kannst beliebig viele Grid Items in ein Grid setzen, wobei du für ein strukturiertes Design mindestens zwei verwenden solltest.
💡 Tipp für Experten: Grids lassen sich verschachteln. Du kannst also ein weiteres Grid in ein bestehendes Grid Item einsetzen, um extrem detaillierte Layout-Strukturen zu schaffen.
Einstellungen und Ausrichtung
In den Component Settings hast du die volle Kontrolle über das Erscheinungsbild deines Grids:
Grid-Einstellungen
Horizontal & Vertical Alignment: Bestimme, wie die Inhalte innerhalb des Grids ausgerichtet werden sollen.
Direction of Grid Items: Lege die Flussrichtung deiner Spalten fest.
Gap between Items: Definiere den Abstand zwischen den einzelnen Spalten (z. B. "Large Gap"), um deinem Design mehr Raum zum Atmen zu geben.
Spacing: Nutze die Spacing-Optionen für feine Anpassungen der Außen- und Innenabstände.
Grid Item-Einstellungen
Item Size: Jedes Grid Item kann eine eigenständige Größe erhalten. Du kannst zwischen einer festen Spaltenbreite, einer automatischen Anpassung (Auto) oder einer Ausrichtung am Inhalt (Content) wählen.
Zusätzliche Flexibilität: Für noch präzisere Abstände empfehlen wir, innerhalb eines Grid Items eine Container-Komponente zu nutzen.
Responsive Design und Umbruchverhalten
JUNE bietet dir sowohl device-übergreifende als auch device-spezifische Einstellungen. Dies ist besonders wichtig für die mobile Optimierung:
Automatischer Umbruch: Grundsätzlich brechen Grids auf kleineren Bildschirmen automatisch um.
Device-spezifische Breite: Du kannst in der Mobile-Ansicht des Editors eine spezifische Breite für deine Grid Items festlegen. So steuerst du exakt, wann und wie die Spalten umbrechen.
Live-Vorschau: Nutze die verschiedenen Viewport-Icons (Desktop, Tablet, Mobile) in der oberen Bar, um das Umbruchverhalten in Echtzeit zu prüfen.
Grid vs. Masonry: Wann nutze ich was?
Während das klassische Grid für vielfältige Inhalte (Bilder, Texte, Formulare) und maximale Kontrolle über die Anordnung sorgt, gibt es für spezielle Use Cases die Masonry-Komponente.
Feature | Klassisches Grid | Masonry |
Primärer Zweck | Vielfältige Inhalte & Struktur | Dynamische Bildanordnung
|
Reihenfolge | Die zweite Reihe beginnt einheitlich unter dem längsten Element der ersten Reihe. | Bilder werden mit einheitlichen Abständen nahtlos aneinandergereiht. |
Kontrolle | Hohe Kontrolle über Spacings und Umbrüche. | Fokus auf Ästhetik bei unterschiedlichen Bildgrößen.
|
Vergleichsbild: Beginn der 2. Reihe in einem Grid vs. Masonry-Beispiel
->visueller Unterschied der Zeilenbildung
Einsatzmöglichkeiten
Grids sind extrem vielseitig und können in fast alle strukturellen Komponenten von JUNE eingesetzt werden, darunter:
Section- & Layout-Komponenten
Tab Container / Tab Items
Collapsibles & Intent Modals