Eine Anleitung zum Auto-Placement-Algorithmus in CSS-Gitter

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!