> ## Documentation Index > Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt > Use this file to discover all available pages before exploring further. # CSS Grid Container BETA # Allgemeine Beschreibung Der "CSS Grid Container BETA" ist ein mächtiges Werkzeug für fortgeschrittene Nutzer, um hochgradig individuelle Layouts in deinem Onlineshop zu erstellen. Mit diesem Portlet kannst du die Struktur deines Rasters (Grids) auf Basis von echtem CSS-Grid exakt definieren und so auch komplexe Anordnungen realisieren, die über herkömmliche Zeilen- und Spalten-Container hinausgehen. # Einsatzmöglichkeiten (Inspiration) * **Komplexe Magazin-Layouts:** Erstelle asymmetrische oder verschachtelte Raster-Designs für Startseiten, Landingpages oder Themenwelten. * **Maßgeschneiderte Galerien:** Baue einzigartige Bild- und Text-Kombinationen auf, in denen bestimmte Elemente z.B. über mehrere Spalten oder Zeilen gezogen werden können. * **Maximale Flexibilität:** Steuere die exakten Abmessungen und das Verhalten deines Layouts punktgenau nach deinen eigenen Vorstellungen. # Featureübersicht: * **Volle CSS-Grid Kontrolle:** Definiere die Spalten und Zeilen mit gängigen CSS-Einheiten wie `fr` (Fraction/Bruchteil), `px` (Pixel), `%` (Prozent) oder `auto`. * **Flexibles Management:** Füge beliebig viele Spalten und Zeilen hinzu, lösche sie wieder oder ändere ihre Reihenfolge ganz bequem per Drag-and-Drop. * **Exakte Platzaufteilung:** Gib den Rahmen vor, an dem sich die in diesem Container platzierten Elemente (wie Bilder oder Texte) exakt orientieren. *** # Settings: ## Allgemein In diesem Reiter baust du das grundlegende Raster (das sogenannte Grid-Template) für deinen Container auf. Image *** **Spalten:** Hier legst du die vertikalen Spalten (Columns) deines Rasters fest. * Klicke auf das blaue **"+" Symbol**, um eine neue Spalte hinzuzufügen. * Trage in das Textfeld den gewünschten CSS-Wert ein (z. B. `1fr` für einen gleichmäßigen anteiligen Platz, `200px` für eine feste Breite oder `auto` für eine automatische Anpassung). * Über das **"x" Symbol** auf der linken Seite kannst du eine Spalte löschen. * Mit dem **Verschieben-Symbol** (Pfeilkreuz) auf der rechten Seite kannst du die Reihenfolge der Spalten festhalten und per Drag-and-Drop verschieben. **Zeilen:** Hier definierst du die horizontalen Zeilen (Rows) deines Rasters. * Klicke auf das blaue **"+" Symbol**, um eine neue Zeile hinzuzufügen. * Trage den entsprechenden Wert in das Feld ein (oft wird hier `auto` genutzt, damit sich die Zeilenhöhe flexibel an den Inhalt anpasst, den du später einfügst). * Über das **"x" Symbol** links kannst du eine nicht mehr benötigte Zeile entfernen. * Über das **Verschieben-Symbol** rechts lässt sich die Position der Zeile im Grid verändern. *** ***