Dieses Tutorial beschreibt den Auto-Placement-Algorithmus des CSS Grid Layout-Moduls, der Elemente basierend auf der Eigenschaft grid-auto-flow positioniert. Frühere Artikel behandelten CSS Grid -Grundlagen, aber dieser konzentriert sich auf den Algorithmus selbst und erkl?rt, wie Elemente in ihren endgültigen Positionen enden.

Schlüsselkonzepte:

• Der automatische Plakementalgorithmus, der von grid-auto-flow (defauf zu row), positioniert Grid-Elemente.
• Es handelt sich
explizit positionierte Elemente (mit
• ) werden zuerst platziert. grid-area
Elemente mit definierten Zeilenpositionen, aber undefinierte Spaltenpositionen werden als n?chstes unter Verwendung von sp?rlicher (Standard-) oder dichter Packung platziert.
Der Algorithmus bestimmt die Spaltenzahl des impliziten Gitters und erweitert nach Bedarf, um Elemente mit spezifischen S?ulenpositionen oder gro?en Spannweiten aufzunehmen.
Schlie?lich werden verbleibende Elemente nach
• unter Verwendung eines automatischen Plakement-Cursors positioniert, der am oberen links des impliziten Gitters beginnt. grid-auto-flow

Verst?ndnis des Algorithmus:

Vor dem Eintauchen verstehen Sie diese Kernkonzepte:

• Anonyme Rasterelemente: Text im Rasterbeh?lter, nicht in Tags eingewickelt, wird zu einem anonymen Gitterelement. Es kann nicht direkt gestylt werden, aber Elternstile erbt. Whitespace erstellt keine anonymen Elemente.
• Gitterspannen: Sofern angegeben, erstreckt sich die Gitterspanne auf 1 (eine Zelle).
• implizites Gitter: Das durch , grid-template-rows und grid-template-columns definierte Raster ist das explizite Gitter. Das implizite Netz wird darüber hinaus erweitert, um Gegenst?nde, die au?erhalb seiner Grenzen platziert sind, aufzunehmen. grid-template-areas

Die folgende Erkl?rung geht davon aus, dass

. Für grid-auto-flow: row tauschen Sie in den Beschreibungen "Zeile" und "Spalte" aus. grid-auto-flow: column

Schritt 1: Anonymous Grid Element Generation:

Der Algorithmus beginnt mit der Erstellung anonymer Rasterelemente aus jedem Text direkt im Netzbeh?lter. Diese sind unstylierbar, aber übergeordnete Stile.

Schritt 2: Ausdrücklich positionierte Elemente platzieren:

Elemente mit explizit definierten Positionen mit

werden zuerst platziert. Der Algorithmus verwendet die grid-area -Werte (Startzeile, Startspalte, Endzeile, Endspalte), um ihren Speicherort zu bestimmen. grid-area

Schritt 3: Elemente mit fester Zeile platzieren, nicht festgelegte Spaltenpositionen:

Als n?chstes werden Elemente mit angegebenem

und grid-row-start (aber nicht Spaltenpositionen) platziert. Der Algorithmus verwendet entweder eine sp?rliche oder dichte Verpackung: grid-row-end

• Sp?rliche Packung (Standard): Das Element wird in der frühesten verfügbaren Spalte platziert, ohne vorhandene Elemente zu überlappen. Es werden nur Elemente berücksichtigt, die in diesem Schritt platziert sind, nicht frühere Schritte.

• dichte Verpackung (): grid-auto-flow: row dense Das Element wird in der frühesten verfügbaren Spalte platziert, auch wenn es bedeutet, es vor anderen Elementen in derselben Zeile zu platzieren, die in diesem Schritt platziert wurden.

(sp?rlich) (dichter)

Schritt 4: Bestimmung der implizite Gitterspaltenzahl:

Der Algorithmus bestimmt die Spaltenzahl des impliziten Gitters:

beginnt mit der Spaltenanzahl des expliziten Rasters.
fügt Spalten hinzu, um Elemente mit definierten Spaltenpositionen aufzunehmen.
fügt Spalten hinzu, wenn die gr??te Spaltespanne zwischen den verbleibenden Elementen die aktuelle implizite Gitterbreite überschreitet.

Schritt 5: Platzieren Sie verbleibende Elemente:

Der Auto-Placement Cursor (anf?nglich am oberen linken) wird verwendet, um verbleibende Elemente zu positionieren. Packmodus (sp?rlich oder dicht) beeinflusst die Platzierung:

• Sp?rliche Packung: Der Cursor bewegt sich über Spalten, bis eine nicht überlappende Position gefunden wird. Wenn in der aktuellen Zeile kein Speicherplatz gefunden wird, bewegt er sich in die n?chste Zeile.

• dichte Verpackung: Der Cursor setzt für jedes Element auf die obere linke Linksrückzahl zurück und findet die früheste verfügbare nicht überlappende Position.

(sp?rlich) (dichter)

Schlussfolgerung:

Diese detaillierte Walkthrough verdeutlicht den CSS-Gitter-Auto-Placement-Algorithmus. Experimentieren Sie mit verschiedenen Layouts, um Ihr Verst?ndnis zu festigen. Der FAQS -Abschnitt aus dem Originaltext wurde für die Kürze weggelassen, da die Erkl?rung des Kernalgorithmus bereits ziemlich umfassend ist.

Das obige ist der detaillierte Inhalt vonEine Anleitung zum Auto-Placement-Algorithmus in CSS-Gitter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!