Editor X: Raster verwenden
8 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
CSS Grids sind eine großartige Möglichkeit, sicherzustellen, dass deine Elemente strukturiert organisiert sind. Im Editor X verfügt jeder Container und jeder Abschnitt über ein integriertes Raster. Du kannst die Anzahl der Zeilen und Spalten auswählen, die deine Komposition erfordert, und ihre Größe in vielen verschiedenen Maßeinheiten anpassen.
In diesem Artikel erfährst du alles über die Arbeit mit Rastern im Editor X:
Möchtest du mehr erfahren?
Sieh dir unsere Lektion über Raster in der Editor X Academy an (nur auf Englisch verfügbar).
Ein vorhandenes Raster anpassen
Jeder Abschnitt und jeder Container verfügt über ein integriertes 1x1-Raster, das du anpassen kannst. Wechsle mit einem Klick zu einem anderen Layout oder erstelle dein eigenes Raster, indem du die Linien über deine vorhandene Komposition ziehst.
Um das Raster anzupassen:
- Klicke auf den entsprechenden Container oder Seitenabschnitt.
- Ändere das Raster auf eine der folgenden Arten:
Layout wählen
Raster auf der Arbeitsfläche anpassen
.
Tipp:
Du kannst auch einen Abschnitt mit einem integrierten Raster hinzufügen, indem du auf das Symbol für Abschnitt hinzufügen 
klickst.
klickst.Ein Raster über das Inspektor-Panel verwalten
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.
Um ein Raster zu verwalten:
- Klicke auf das entsprechende Raster.
- Klicke oben rechts in Editor X auf das Symbol für Inspektor
. - Klicke auf den Tab Layout
und scrolle nach unten zu Anzeige. - Wähle aus, was du tun möchtest:
- Ein anderes Layout auswählen: Klicke auf das Aufklappmenü Layout, um ein anderes Aussehen auszuwählen, das die gleiche Anzahl von Zellen wie das vorhandene Raster enthält.
- Das Raster manuell anpassen: Klicke unten, um zu erfahren, wie du vorgehen musst:
Weitere Spalten oder Reihen hinzufügen
.
und wähle eine Option:
Die Größe deiner Spalten oder Reihen ändern
Die Größe der Abstände bearbeiten
Eine Spalte oder Reihe löschen
Mit Breakpoints arbeiten:
Wenn du ein Raster entwirfst, wird es nur an dem bestimmten Breakpoint angezeigt, an dem du arbeitest. Du solltest für jede Bildschirmgröße ein Raster erstellen, um sicherzustellen, dass die Komposition deiner Elemente einwandfrei ist.
Elemente in einem Raster positionieren
Während du Elemente hinzufügst und in deinem Raster platzieren kannst, gibt es verschiedene Tools, die dir helfen, ein responsives Layout zu erstellen:
Elemente andocken
Das Andocken von Elementen an die Rasterlinien stellt sicher, dass diese genau so positioniert sind, wie du es möchtest. Wenn du ein Element zu einer Rasterzelle hinzufügst, wird es automatisch an die nächstgelegenen vertikalen und horizontalen Rasterlinien angedockt. Du kannst das Andocken nach Bedarf im Inspektor-Panel anpassen.
Elemente in eine andere Rasterzelle verschieben
Im Inspektor kannst du im Abschnitt Position ein Element auswählen und sehen, in welchen Rasterzellen es positioniert ist. Klicke auf eine beliebige Rasterzelle, um das Element dorthin zu verschieben, ohne Drag-and-Drop verwenden zu müssen.
Elemente strecken, um eine Rasterzelle auszufüllen
Dehne Elemente mit nur einem Klick, um eine Rasterzelle auszufüllen. Wenn ein Element über den Rasterlinien von mehr als einer Zelle positioniert wird, wird es über alle Zellen gestreckt, in denen es sich befindet.
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, Pixel oder Fraktion (fr) festlegen. Du kannst auch die Mindest- und Maximalgröße der Spalten und Zeilen einstellen und sogar Berechnungen verwenden, um das gewünschte Raster zu erstellen.
Hinweis:
Du kannst die Größe deiner Zeilen und Spalten in verschiedenen Einheiten festlegen. Standardmäßig sind die Einheiten für Zeilen in Pixel und die Einheiten für Spalten in fractions (fr).
Einheit | Art der Einheit | Erläuterung |
|---|---|---|
Fraktion (fr) | Fließend | Lege die Größe deiner Spalten/Zeilen auf einen Bruchteil der Größe des Seitenabschnitts/Containers fest. Wenn z. B. in einem Raster mit 2 Spalten die linke Spalte auf 2 fr und die rechte Spalte auf 1 fr eingestellt ist, nimmt die linke Spalte 2/3 des Abschnitts/Containers ein. |
Automatisch | Fließend | Die Höhe und Breite der Zeilen und Spalten werden automatisch so eingestellt, dass der Inhalt in sie hineinpasst. |
Prozentsatz (%) | Fließend | Lege die Größe deiner Spalten/Zeilen auf einen Prozentsatz des Abschnitts/Containers fest. |
Pixel (px) | Fixiert | Lege die Größe deiner Spalten/Zeilen auf eine feste Anzahl von Bildschirmpixeln des Abschnitts/Containers fest. 1px = 1/96stel von 1 inch. |
Viewport-Breite (vw) | Viewport | Lege die Größe deiner Spalten/Zeilen auf einen Prozentsatz der Breite des Viewports (der Größe des Browserfensters) fest. Wenn z. B. der Viewport 50 cm breit ist, ist 1vw = 0,5 cm. |
Viewport-Höhe (vh) | Viewport | Lege die Größe deiner Spalten/Zeilen auf einen Prozentsatz der Höhe des Viewports (der Größe des Browserfensters) fest. Wenn z. B. der Viewport 50 cm hoch ist, ist 1vh = 0,5 cm. |
Min/Max | Sonstige | Lege die Größe deiner Spalten/Zeilen auf eine minimale und maximale Abmessung fest. Du kannst bei der Verwendung dieser Option eine beliebige Rastereinheiten wählen. |
Min. Inhalt | Sonstige | Stelle die Größe deiner Spalten/Zeilen so ein, dass sie nie kleiner als dieser Mindestinhalt werden. |
Max. Inhalt | Sonstige | Stelle die Größe deiner Spalten/Zeilen so ein, dass sie nie größer als dieser maximale Inhalt werden. |
Berechnung | Sonstige | Erstelle eine Berechnung mit einer der Rastereinheiten, um die Größe der Spalten/Zeilen festzulegen. |
War das hilfreich?
|