Studio Editor: Mit einem erweiterten CSS Grid arbeiten
7 Min. Lesezeit
Im Studio Editor kannst du ein erweitertes CSS Grid verwenden, um das Layout von Elementen und Abschnitten zu organisieren. Du kannst die gewünschte Anzahl der Zeilen und Spalten auswählen und ihre Größe mit Hilfe von responsiven Maßeinheiten festlegen (z. B. fr, Min./Max., %).
In diesem Artikel erfährst du alles über die Arbeit mit einem CSS Grid:
Vom Abschnittsraster zu einem CSS Grid wechseln
Abschnitte im Editor verfügen über die Option, ein Abschnittsraster festzulegen. Dies ist eine einfach zu bedienende Version des erweiterten Rasters, die auf derselben CSS-Logik basiert. Wenn du zu einem erweiterten CSS Grid wechselst, hast du eine genauere Kontrolle über das Layout pro Breakpoint.
Hinweis:
Sobald du den Wechsel vornimmst, ist es nicht möglich, zu einem Abschnittsraster zurückzukehren. Wenn du die Aktion gerade erst ausgeführt hast, kannst du den Rückgängig-Button 
oben rechts im Editor verwenden..
oben rechts im Editor verwenden..Um vom Abschnittsraster zu einem CSS Grid zu wechseln:
- Wähle den entsprechenden Abschnitt im Editor aus.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen
. - Scrolle nach unten zu Layout.
- Klicke neben Erweitertes CSS Grid auf Wechseln.
- Klicke auf Zu CSS Grid wechseln.
Wie geht es weiter?
Passe die Zeilen, Spalten und Abstände im Inspektor-Panel an. Du kannst auch die Rasterlinien auf der Arbeitsfläche ziehen, um sie zu verschieben.
Ein CSS Grid auf andere Elemente anwenden
Du kannst ein CSS Grid auf Container-, Lightbox-, Flexbox- und Repeater-Elemente anwenden. Insbesondere beim Repeater-Element gilt dass der Rest automatisch aktualisiert wird, sobald du ein Raster angewendet hast.
Um ein CSS Grid anzuwenden:
- Wähle das entsprechende Element im Editor aus.
- Klicke auf das Symbol für Weitere Aktionen
. - Klicke auf Erweitertes CSS Grid anwenden.
- Wähle ein Layout aus dem Aufklappmenü 1x1 aus.
Tipp: Wähle Andere, wenn du deine eigene Anzahl an Zeilen und Spalten festlegen möchtest.
Wie geht es weiter?
Passe die Zeilen, Spalten und Abstände im Inspektor-Panel an. Du kannst auch die Rasterlinien auf der Arbeitsfläche ziehen, um sie zu verschieben.
Ein CSS Grid anpassen
Passe dein Raster an, um genau das Layout zu erhalten, das du möchtest. Du kannst die Anzahl der Zeilen und Spalten ändern, ihre Größe und die Abstände zwischen ihnen anpassen.
Tipp:
Wenn du ein Raster entwirfst, gilt es nur für den spezifischen Breakpoint, an dem du arbeitest. Du solltest das Raster auf jeden Breakpoint zuschneiden, um sicherzustellen, dass die Komposition deiner Elemente einwandfrei ist.
Um ein CSS Grid anzupassen:
- Wähle das entsprechende Element oder den Abschnitt aus.
- Wähle, wie du das Raster anpassen möchtest:
Ein anderes Layout wählen
Weitere Zeilen und Spalten hinzufügen
.
, um diese Option zu sehen.
Die Größe deiner Spalten oder Reihen ändern
Eine Spalte oder Zeile löschen
.
.Die Größe der Abstände bearbeiten
Elemente in einem Raster positionieren
Beim Hinzufügen von Elementen zum Raster können dir verschiedene Werkzeuge helfen, deren Platzierung genauer festzulegen.
Elemente andocken
Das Andocken von Elementen an die Rasterlinien, stellt sicher, dass sie genau so positioniert werden, wie du es möchtest. Im Studio Editor werden alle Elemente automatisch angedockt, aber du kannst das Andocken manuell anpassen und Ränder hinzufügen.
Elemente zwischen Rasterzellen verschieben
Im Inspektor kannst du im Abschnitt Position ein Element auswählen und sehen, in welchen Rasterzellen es sich befindet. Klicke auf eine beliebige Rasterzelle, um das Element dorthin zu verschieben, ohne Drag-and-Drop verwenden zu müssen.
Du kannst auch die spezifischen Spalten- und Zeilennummern eingeben, was nützlich ist, wenn du ein Element über mehrere Rasterzellen platzieren musst.
Tabelle der Rastereinheiten
Verwende die gesamte Palette an CSS-Einheiten, um dein Raster zu erstellen. Du kannst die Größe der Spalten und Zeilen mit Prozentwerten, Fraktionen oder Pixeln festlegen. Alternativ kannst du die minimale und maximale Größe der Spalten und Zeilen festlegen oder Berechnungen verwenden, um das gewünschte Raster zu erstellen.
Prozentsatz (%)
Fraktion (fr)
Automatisch
Pixel (px)
Viewport-Breite und -Höhe (vw und vh)
Min- und Max-Content
Min./Max.
Berechnung
War das hilfreich?
|