Skip to main content

​
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.