Share
Es ist durchaus möglich, die CSS-Positionierung für Rasterelemente zu verwenden, genau wie bei den meisten anderen Elementen. Es gibt jedoch ein oder zwei Macken, also werfen wir einen kurzen Blick darauf, dass Sie die Fallstricke vermeiden.
Beginnen wir mit einem einfachen Raster mit neun Elementen, die in drei Spalten angeordnet sind. Jede Spalte ist 1 Zoll breit, mit Ausnahme der dritten Spalte (danke Minimal Maximal()) wird nicht kleiner als 160px sein:
Raster-Template-Spalten: 1fr 1fr Minmax (160px, 1fr);
Durch Hinzufügen einiger Regeln zu einem Element können wir es relativ positionieren:
.item-2 position: relativ; rechts: 100px; oben: 30px;
So wie wir es erwarten können, erklären wir das auch item-2 ist relativ zu positionieren und dann einige Versatz-Eigenschaften zu definieren (obwohl Sie nicht versuchen, die fr-Einheit für diese zu verwenden, funktioniert dies nicht).
Wenn Sie die Größe des Fensters ändern, werden Sie feststellen, dass sich das Rasterelement genau so verhält, wie es war, bevor wir es neu positioniert haben, und es ist immer noch selbstsüchtig, seinen Platz im Raster zu reservieren, falls Sie zurückkommen möchten.
Was passiert also, wenn wir? absolut Positionieren Sie diesen Artikel? Erstens positioniert es sich gegen seinen nächsten Vorfahren, der einen deklarierten Positionswert hat. Wenn Sie nicht einstellen Position: relativ; (Zum Beispiel) auf dem Gittercontainer wird das Gitterelement aus den Grenzen des Gitters heraus verschoben, um nach etwas zu suchen, an das er sich halten kann, beispielsweise nach dem HTML-Element.
Wie Sie in der Demo oben sehen werden, befindet sich der Artikel jetzt absolut 100px von links und 30px von oben im Raster-Container. Es wurde effektiv aus dem Dokumentenfluss entfernt, wie es bei absolut positionierten Elementen normal ist. Sein Platz im Gitter wurde mit ausgefüllt item-3 und die anderen Gegenstände haben sich gestellt, um die verbleibenden Lücken zu füllen.
Hinweis: Wenn unser Gittercontainer gepolstert sein sollte, würde die Positionierung in Bezug auf diese äußeren Polstergrenzen stehen.
Sie werden auch sehen, dass es nicht mehr die Dimensionen hat, als es Teil des Gitters war. Es ist auf die Größe seines Inhalts geschrumpft. Das Raster beeinflusst die Bemessung des Elements nicht und das Element beeinflusst in keiner Weise die Bemessung des Rasters.
Das kann gewöhnungsbedürftig sein, aber zusätzlich zu den normalen Offsets können Sie auch ein Rasterelement mithilfe der Rasterplatzierungseigenschaften positionieren. Stellen wir zum Beispiel unser ein item-2 absolut auf Netzfläche: 3/2; (Mit anderen Worten, beginnend mit der dritten Zeile nach unten und der zweiten Spalte quer).
Es sieht seltsam aus, aber Sie können sehen, dass der Gegenstand, der von der Größe des Gitters immer noch unberührt ist und sich außerhalb des Flusses befindet, sich grob auf der Position positioniert hat item-9. Es ist, als hätte es ein eigenes Gitter, zusätzlich zum Original.
HinweisMit z-index können Sie die Stapelreihenfolge der Elemente ändern, wenn Sie möchten.
Weitermachen, wenn wir dann einen Offset in den Mix einfügen (oben: 50px; Zum Beispiel) wird unser Element diesen Versatz anwenden, während er der eigenen imaginären Rasterplatzierung treu bleibt:
In unserem vorherigen Tutorial haben wir darüber gesprochen, wie Grid erstellt wird implizit Tracks, wenn sie benötigt werden; Spuren außerhalb derer, die wir explizit definieren. Wir können Elemente auf diesen impliziten Gitterspuren positionieren, wenn sie vorhanden sind, Grid jedoch nicht erstellen diese Spuren für Elemente außerhalb des Flusses.
In der Demo haben wir uns positioniert item-2 auf Netzfläche: 2/4; das ist aber nur möglich weil Punkt-6, Was sich noch im Fluss befindet, hat Grid bereits veranlasst, diese zusätzlichen Tracks für uns zu erstellen.
Warum brauchen Sie eine Positionierung mit Grid? Anfangs mag es wie ein Overkill erscheinen. Wenn Sie jedoch an defekte Raster-Layouts denken und sich über die einfachen Seiten, die wir gewohnt sind, hin und her bewegen, werden Sie die Positionierung meiner Meinung nach sehr nützlich finden.
Accentsconagua