Accentsconagua
Share
In einem unserer Einführungs-Tutorials zu CSS Grid haben wir uns mit Fließsäulen und besseren Dachrinnen befasst. Wir haben gelernt, dass es nicht notwendig ist, genau anzugeben, wo wir unsere Gitterelemente positionieren möchten. Wenn wir die Eigenschaften unseres Gitters angeben, fügt Grid unsere Artikel gemäß dem automatischen Platzierungsalgorithmus ein.
In diesem Tutorial werden wir sehen, wie dieser Algorithmus seine Arbeit erledigt und wie wir ihn beeinflussen können.
Wenn Ihr Browser nicht für die Unterstützung von Grid eingerichtet ist, müssen Sie dies nachholen. Lesen Sie dies:
Hier ist ein Demo-Raster zum Anstoß; Es ist ein Container, den wir als deklariert haben Anzeige: Raster; und enthält achtzehn Kindelemente. Wir haben angegeben, dass es fünf Spalten haben sollte, von denen jede die gleiche Breite, mindestens die gleiche Anzahl von Reihen und eine schmale Rinne von 2 Pixeln hat.
Rastervorlagen-Spalten: Wiederholung (5, 1fr); Raster-Vorlage-Zeilen: Wiederholen (5, 1fr); Gitterlücke: 2px;
So weit, so gut, und Sie können sehen, dass Grid unsere achtzehn Gegenstände genommen und sie hineingeschoben hat, von links oben gearbeitet, nach rechts verschoben und dann Reihe für Reihe nach unten bewegt wurde. Dieses Verhalten ähnelt der Funktionsweise von Floats.
Hinweis: Das Verhalten von links nach rechts würde umgekehrt werden, wenn wir uns mit a beschäftigen würden Richtung: RTL; Layout.
Das ist alles schön und ordentlich, aber mal sehen, was passiert, wenn unsere Artikel nicht so perfekt passen. Zu .Punkt-7 Wir werden einige Regeln hinzufügen, um es größer zu machen, indem wir zwei Spalten und zwei Zeilen umfassen:
.item-7 background: # e03f3f; Rastersäule: Span 2; Rasterreihe: Span 2;
Wie sieht das jetzt aus??
Nicht so schlecht! .Punkt-7 füllt mehr Platz, so .Punkt-8 und .item-9 sind weiter positioniert. .item-10 dann sucht er nach einem freien Platz neben .item-9, und wenn es sieht, dass es nicht ist, bewegt es sich Nieder eine Reihe und beginnt ganz links wieder. Die anderen Gegenstände passen auf dieselbe Weise ein.
Aber warte mal, wenn wir auch machen .item-9 etwas übergewichtig?
Jetzt wird es interessant; .item-9 passt am Ende nicht mehr in die Spalte, wird also in die nächste Reihe gedrückt. Da passt nichts mehr .Punkt-7 es bleibt stehen. .item-10, Sie könnten sich vorstellen, würde sich darunter stecken .Punkt-6 wieder, aber wenn Sie sich erinnern, sucht es nach einer freien Spalte und schlägt fehl, dass es verschoben wird eine Reihe runter und rennt wieder nach links. Dies ist ein wichtiges Konzept.
Wenn Sie sich die vorherige Demo ansehen, werden Sie das sehen .item-18, wenn nicht genügend Platz neben gefunden wird .item-17, ist eine Reihe nach unten gerückt. Wir haben eigentlich nur fünf Zeilen definiert, aber Grid hat angenommen, dass wir eine weitere Reihe anpacken wollen. Dies liegt an Netz-Auto-Fluss, welches zum Grid-Element gehört und dessen Standardwert ist Reihe. Wir können diesen Wert in ändern Säule Wenn wir wollen, was das Aussehen unseres Gitters völlig verändern würde:
Das sieht aus Art von ähnlich, aber Sie werden bemerken, dass unsere Artikel oben links eingefügt wurden, dann nach unten verschoben wurden, um jede Zeile auszufüllen, dann in die zweite Spalte usw. verschoben wurden. Wenn nun ein Artikel zu groß für seine Stiefel ist, sucht der folgende Artikel nach dem nächsten freien Zeilenbereich und schlägt dann fehl, wenn er zur nächsten Spalte wechselt.
Wir können ein weiteres Stichwort zu unserem hinzufügen Netz-Auto-Fluss property, und es ist wahrscheinlich mein bisheriges Lieblings-CSS-Keyword: dicht. Das Standardgegenstück ist spärlich (mein zweiter Favorit). Lass uns folgendes tun:
gitter-auto-flow: reihe dicht;
Hinweis: wir müssen nicht einschließen Reihe Hier ist es impliziert, aber dies unterstreicht, wie die Syntax funktioniert.
Nun unser Freund .item-10, Wenn Sie feststellen, dass es keinen Platz neben gibt .item-9, prüft zuerst was über bevor Sie in eine andere Reihe wechseln.
Dank dieser Änderung des Platzierungsalgorithmus sind unsere Artikel jetzt dicht gepackt, wodurch wir ein effizienteres Gitter erhalten. Dies bedeutet jedoch, dass das visuelle Layout nicht unbedingt die Reihenfolge der Dokumentquellen widerspiegelt, was für den Benutzer nicht immer hilfreich ist.
Lassen Sie uns rekapitulieren:
Netz-Auto-Fluss von Reihe zu Säule.Netz-Auto-Fluss akzeptiert ein Schlüsselwort, um den Ansatz des Packens zu beschreiben. Standardmäßig ist dieser Wert spärlich, aber wir können das ändern dicht die versucht, alle verfügbaren Lücken zu füllen.