Elemente im CSS-Rasterlayout verschieben [Guide]
Verwendung der CSS-Layout-Modul in Webdesign wird immer praktikabler, je mehr Browser anfangen unterstütze es. Beim Erstellen von Layouts, die Gitterzellen ausfüllen, kann es jedoch einen Moment geben, in dem Sie kompliziertere Dinge erreichen möchten.
Zum Beispiel möchten Sie vielleicht leicht bewegen Einige der Gitterelemente bleiben in ihren Gitterbereichen hängen. Vielleicht möchten Sie auch Bewegen Sie sie aus dem Gittercontainer (Überlauf) oder übereinander (Überlappung) oder einfach… um etwas leeren Raum herum.
In diesem Beitrag zeige ich Ihnen, wie Sie können Verschieben, Ordnen, Überlaufen, Überlappen und Größe der Rasterelemente Wenn Sie das CSS-Grid-Layout-Modul verwenden.
Erstellen Sie ein CSS-Raster
Zuerst erstellen wir ein einfaches CSS-Raster mit eine Zeile und drei Spalten.
Im HTML erstellen wir eine Reihe von divs, in denen der Gittercontainer steht enthält die drei Gitterelemente.
In der CSS der Rastercontainer hat die Anzeige: Raster; Eigentum und die Gitterelemente haben Netzfläche das identifiziert die Namen der Gitterelementbereiche.
Wir ... auch Ergänzen Sie die Raster-Vorlagenbereiche Eigentum zu dem Gittercontainer, in dem die Namen der Gitterbereiche verwendet werden Weisen Sie die Gitterbereiche den von ihnen repräsentierten Gitterzellen zu.
Alle Spalten Nehmen Sie die Größe einer Fraktion (fr) der Containerbreite, um die Eindämmung der Gitterelemente sicherzustellen.
.Gittercontainer Anzeige: Gitter; Rastervorlagenbereiche: 'links Mitte rechts'; Rastervorlagen-Spalten: Wiederholung (3, 1fr); Raster-Vorlage-Zeilen: 80px; Gitterspalt: 5px; Breite: 360px; Hintergrundfarbe: Magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div Hintergrundfarbe: Hellgrün;
Überlaufgitterelemente
Sie können ein Gitterelement erstellen Überlauf seines Gittercontainers wenn es für ein Layout notwendig ist. Um den Überlaufeffekt zu erreichen, müssen Sie nur das tun Verwenden Sie eine andere Spaltengröße:
.Gittercontainer Anzeige: Gitter; Rastervorlagenbereiche: 'links Mitte rechts'; Rastervorlagen-Spalten: Wiederholung (3, 150px); Gitterspalt: 5px;
Das Summe der Spalten- und Lückengröße ist größer als die Breite des Behälters, Dies führt dazu, dass die Rasterelemente ihren Container überlaufen.
Überlappen Sie Rasterelemente
EIN Rasterelement kann sich überlappen (ganz oder teilweise bedecken) ein anderes Gitterelement in folgenden Fällen:
- Es ist so eingestellt, dass es sich über (und über) die Zellen eines anderen Gitterelements erstreckt.
- Seine Größe wurde vergrößert, wodurch es mit dem nahegelegenen Gitterelement überlappt.
- Es wurde auf ein anderes Gitterelement verschoben.
Wir werden den zweiten und den dritten Fall später im “Dimensionierung” und “Ziehen um” Abschnitte.
Zuerst sehen wir den ersten Fall, wenn ein Gitterelement vorhanden ist überspannt einen anderen.
Das Rasterelement in der Mitte hat überspannte den linken, Daher sind nur zwei Elemente auf dem Bildschirm sichtbar.
.gittermitte gitterfläche: zentrum; Rastersäule: 1/3;
Das Rasterspalte und Rasterzeile Eigenschaften Weisen Sie Gitterlinien zu zwischen denen eine Spalte oder Zeile passen muss.
Im untenstehenden Diagramm sehen Sie, wie die Rastersäule: 1/3 CSS-Regel funktioniert: die mittlere Spalte Spannweiten zwischen den Gitterlinien 1 und 3. Daher überlappt die mittlere Spalte die linke.
Gitterelemente verschieben
Mit Umzug meine ich die Gegenstände leicht bewegen. Wenn Sie einen Artikel vollständig in eine andere Rasterzelle / einen anderen Bereich verschieben möchten, empfehle ich Ihnen, den Rastererstellungscode zu aktualisieren.
Das Bewegen von Rasterelementen ist einfach. Gerade benutze die Spanne, das verwandeln, oder der Position: relativ; Eigenschaften. Nachfolgend wird beschrieben, wie die Elemente mit diesen Eigenschaften verschoben werden.
Die mittleren und rechten Rasterelemente können (wie oben gezeigt) auf folgende Weise verschoben werden:
1. Verwenden von Spanne
Negative Margen erhöhen die Dimensionen von Gitterelementen, während positive Margen sie abschneiden. Wenn Sie eine Kombination aus beiden verwenden, können Sie die Gitterelemente leicht verschieben.
.gittermitte gitterfläche: zentrum; Rand links: -10px; Rand rechts: 10px; Rand oben: -10px; Rand unten: 10px; .grid-right grid-area: right; Rand links: 10px; Rand rechts: -10px; Rand oben: -10px; Rand unten: 10px;
2. Verwenden von verwandeln
Das Übersetzen() CSS-Funktion verschiebt ein Element entlang der x- und y-Achse. Zusammen mit dem verwenden verwandeln Mit dieser Eigenschaft können Sie die Position eines Rasterelements ändern.
.gittermitte gitterfläche: zentrum; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Verwendung von Position
Verwendung der Position: relativ; Regel mit dem angegebenen oben, Unterseite, links, und Recht Eigenschaften können auch zum Verschieben von Rasterelementen verwendet werden.
.gittermitte gitterfläche: zentrum; Position: relativ; unten: 10px; rechts: 10px; .grid-right grid-area: right; Position: relativ; unten: 10px; links: 10px;
Rasterelemente bestellen
Rasterelemente werden auf dem Bildschirm angezeigt in der Reihenfolge, in der sie im HTML-Quellcode erscheinen.
Wenn im vorherigen Abschnitt das mittlere Objekt nach links verschoben wurde, wurde es vom Browser auf das linke Objekt gesetzt. Dies geschah denn im HTML, Wir können jedoch Ändern Sie die Bestellrasterelemente Verwendung der Verwendung der Ändern Sie wie im CSS-Rasterlayout-Modul die Elementreihenfolge in HTML hat keinen Einfluss auf das Rasterlayout, Sie können auch setzen Wenn Sie Zeilen oder Spalten mit automatischer Größe für ein Rasterelement verwenden (mit Denken Sie daran, dass in unserem Beispielraster alle drei Spalten einen Bruch enthalten ( Hier ändern wir die Größe des linken Elements Verwendung der Hier ändern wir die Größe des linken Elements Verwendung der z-index oder der Auftrag CSS-Eigenschaften.
z-Index: 1; Regel das linke Gitterelement hat einen höheren Stapelkontext.. gitter links gitterfläche: links; z-Index: 1;
Größe der Gitterelemente
Auto, fr, GR Einheiten), schrumpft es, um Platz für das benachbarte Element zu schaffen, das an Größe zugenommen hat nur wenn besagter Artikel wurde nicht von sortiert verwandeln oder eine negative Marge.fr) des Gittercontainers. Sehen Sie sich an, wie alle drei Elemente aussehen, nachdem die Größe des linken Elements auf zwei verschiedene Arten geändert wurde.1. Größe mit
Breite und HöheBreite und Höhe Eigenschaften. Dadurch bleibt es im Gittercontainer.
.gitter links gitterfläche: links; Breite: 200px; Höhe: 90px;
2. Größe mit
verwandelnverwandeln Eigentum. Dadurch überläuft es den Container und der Gitterabstand verschwindet ebenfalls.
.gitter links gitterfläche: links; transform: scalex (1,8);
