Allgemeine Beschreibung
Das “CSS Grid Element BETA” ist der eigentliche Inhaltsbaustein, den du in deinen zuvor erstellten “CSS Grid Container BETA” einfügst. Mit diesem Portlet legst du für jedes einzelne Element (wie z. B. ein Bild, einen Text oder einen Banner) ganz individuell fest, wie viel Platz es innerhalb deines Rasters (Grids) beanspruchen soll.Einsatzmöglichkeiten (Inspiration)
- Fokus-Elemente schaffen: Lasse ein wichtiges Hauptbild über zwei Spalten und zwei Zeilen gehen, während sich kleinere Nebenbilder brav in jeweils nur einer Spalte darum herum anordnen.
- Asymmetrische Layouts: Durchbrich langweilige Kachel-Muster, indem du Elemente unterschiedlich weit aufziehst – perfekt für moderne Magazin- oder Portfolio-Designs.
- Baukasten-System: Nutze das Element als “Hülle” und ziehe anschließend beliebige andere OPC-Portlets (wie Textblöcke oder Buttons) direkt hinein.
Featureübersicht:
- Einfache Platzaufteilung: Bestimme ganz ohne CSS-Code nur durch die Eingabe von Zahlen, wie weit sich das Element ausdehnen soll.
- Horizontale und vertikale Ausdehnung: Steuere unabhängig voneinander, über wie viele Spalten (Breite) und Zeilen (Höhe) sich der Inhalt erstreckt.
Settings:
Allgemein
In diesem Reiter steuerst du das Verhalten deines Elements innerhalb des übergreifenden CSS Grids.
Wie viele Spalten nimmt das Element ein?: Trage hier als Zahl ein, über wie viele der vertikalen Raster-Spalten sich dieses Element strecken soll.
- Ein Wert von
1bedeutet, das Element füllt genau eine Spalte aus (Standard). - Ein Wert von
2(oder mehr) zieht das Element entsprechend in die Breite, sodass es mehrere Spalten überdeckt.
- Ein Wert von
1belässt das Element in einer einzigen Zeile. - Ein Wert von
2(oder mehr) zieht das Element vertikal in die Länge, sodass es über mehrere Zeilen verläuft.