Erkundung des impliziten Rasters und der Auto-Platzierungs-Möglichkeiten von CSS Grid

Wenn Sie mit CSS Grid arbeiten, müssen Sie zunächst festlegen display: grid auf dem Element, das wir zu einem Grid-Container werden wollen. Dann definieren wir das Gitter explizit mit einer Kombination von grid-template-columns, grid-template-rows und grid-template-areas. Und von dort aus besteht der nächste Schritt darin, Elemente innerhalb des Rasters zu platzieren.

Dies ist der klassische Ansatz, der verwendet werden sollte und den ich auch empfehle. Es gibt jedoch einen anderen Ansatz zum Erstellen von Rastern ohne explizite Definition. Wir nennen das die implizites Raster.

"Explizit implizit? Was zum Teufel geht hier vor?"

Seltsame Begriffe, oder? Manuel Matuzovic schon hat eine gute Erklärung was wir in CSS Grid als „implizit“ und „explizit“ bezeichnen können, aber lassen Sie uns direkt untersuchen, was specification sagt:

Das grid-template-rows, grid-template-columns und grid-template-areas Eigenschaften definieren eine feste Anzahl von Spuren, die sich bilden das explizite Raster. Wenn Rasterelemente außerhalb dieser Grenzen positioniert werden, generiert der Rastercontainer implizite Rasterspuren, indem er dem Raster implizite Rasterlinien hinzufügt. Diese Linien bilden zusammen mit dem expliziten Raster das implizite Gitter.

Im Klartext generiert der Browser also automatisch zusätzliche Zeilen und Spalten, falls Elemente außerhalb des definierten Rasters platziert werden.

Was ist mit der automatischen Platzierung?

Ähnlich wie beim Konzept des impliziten Gitters, automatische Platzierung ist die Fähigkeit des Browsers, die Elemente automatisch innerhalb des Rasters zu platzieren. Wir müssen nicht immer die Position jedes Elements angeben.

Anhand verschiedener Anwendungsfälle werden wir sehen, wie uns solche Funktionen helfen können, komplexe und dynamische Grids mit ein paar Zeilen Code zu erstellen.

Dynamische Seitenleiste

Hier haben wir drei verschiedene Layouts, aber wir haben nur eine Gitterkonfiguration, die für alle funktioniert.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Nur eine Spalte nimmt den gesamten freien Platz ein. Dies ist unser „explizites“ Raster. Es ist so eingerichtet, dass ein Rasterelement in das passt main Gitterbehälter. Das ist alles. Eine Spalte und eine Zeile:

Aber was wäre, wenn wir uns entschieden hätten, ein weiteres Element dort hineinzuwerfen, sagen wir an aside (unsere dynamische Seitenleiste). Wie es derzeit (und ausdrücklich) definiert ist, muss sich unser Raster automatisch anpassen, um einen Platz für dieses Element zu finden. Und wenn wir nichts anderes mit unserem CSS machen, sagt uns DevTools Folgendes, was passiert.

Wir können die bewegen <aside> zu einer Spalte neben dem <section>:

aside {
  grid-column-start: 2;
}

Und hier ist, was DevTools uns jetzt sagt:

Wir platzieren unser Element in der zweiten Spalte, aber … wir haben keine zweite Spalte. Verrückt oder? Wir haben nie eine zweite Spalte auf der deklariert <main> Grid-Container, aber der Browser hat einen für uns erstellt! Dies ist der Schlüsselteil der Spezifikation, die wir uns angesehen haben:

Wenn Gitterelemente außerhalb dieser Grenzen positioniert werden, generiert der Gittercontainer implizite Gitterspuren, indem er dem Gitter implizite Gitterlinien hinzufügt.

Diese leistungsstarke Funktion ermöglicht uns dynamische Layouts. Wenn wir nur die haben <section> Element erhalten wir nur eine Spalte. Aber wenn wir ein hinzufügen <aside> Element zum Mix hinzuzufügen, wird eine zusätzliche Spalte erstellt, die es enthält.

Wir könnten die platzieren <aside> Vor dem <section> stattdessen so:

aside {
  grid-column-end: -2;
} 

Dadurch wird die implizite Spalte am Anfang des Rasters erstellt, im Gegensatz zum vorherigen Code, der die implizite Spalte am Ende platziert.

Wir können dasselbe einfacher mit dem tun grid-auto-flow -Eigenschaft, um alle impliziten Spuren so einzustellen, dass sie in a fließen column Richtung:

Jetzt gibt es keine Notwendigkeit zu spezifizieren grid-column-start um die zu platzieren <aside> Element rechts von der <section>! Tatsächlich wird jedes andere Gitterelement, das wir jederzeit dort einfügen möchten, jetzt in Spaltenrichtung fließen, wobei jedes in seinen eigenen impliziten Gitterspuren platziert wird. Perfekt für Situationen, in denen die Anzahl der Elemente im Raster nicht im Voraus bekannt ist!

Das heißt, wir brauchen noch grid-column-end wenn wir es in einer Spalte links davon platzieren wollen, weil sonst die <aside> wird die explizite Spalte belegen, die wiederum die schiebt <section> außerhalb des expliziten Gitters und zwingt es, die implizite Spalte zu nehmen.

Ich weiß, ich weiß. Das ist ein wenig verworren. Hier ist ein weiteres Beispiel, das wir verwenden können, um diese kleine Eigenart besser zu verstehen:

Im ersten Beispiel haben wir keine Platzierung angegeben. In diesem Fall platziert der Browser zuerst die <aside> -Element in der expliziten Spalte, da es im DOM an erster Stelle steht. Das <section>wird währenddessen automatisch in der Rasterspalte platziert, die der Browser automatisch (oder implizit) für uns erstellt.

Im zweiten Beispiel setzen wir die <aside> Element außerhalb des expliziten Gitters:

aside {
  grid-column-end: -2;
}

Das ist jetzt egal <aside> steht im HTML an erster Stelle. Durch Neuzuordnung <aside> Woanders haben wir das gemacht <section> Element verfügbar, um die explizite Spalte zu übernehmen.

Bildraster

Versuchen wir etwas anderes mit einem Raster von Bildern, bei dem wir ein großes Bild und ein paar Miniaturansichten daneben (oder darunter) haben.

Wir haben zwei Gitterkonfigurationen. Aber rate mal was? Ich definiere überhaupt kein Raster! Alles was ich mache ist folgendes:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Es ist überraschend, dass wir nur eine Codezeile benötigen, um so etwas zu erreichen, also lassen Sie uns analysieren, was vor sich geht, und Sie werden sehen, dass es einfacher ist, als Sie vielleicht denken. Zuerst, grid-area ist eine abgekürzte Eigenschaft, die die folgenden Eigenschaften in einer einzigen Deklaration kombiniert:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Warte ab! Ist nicht grid-area die Eigenschaft, die wir verwenden, um zu definieren benannte Gebiete anstatt wo Elemente im Raster beginnen und enden?

Ja, aber es tut auch mehr. Wir könnten noch viel mehr darüber schreiben grid-area, aber in diesem speziellen Fall:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Wir können dasselbe sehen, wenn wir DevTools knacken, um die Kurzversion zu erweitern:

Das bedeutet, dass das erste Bildelement im Raster überspannen muss drei Spalten und drei Reihen. Da wir aber keine Spalten oder Zeilen definiert haben, erledigt das der Browser für uns.

Wir haben im Wesentlichen das erste Bild im HTML so platziert, dass es ein 3⨉3-Raster einnimmt. Das bedeutet, dass alle anderen Bilder automatisch in denselben drei Spalten platziert werden, ohne dass etwas Neues angegeben werden muss.

Zusammenfassend haben wir dem Browser gesagt, dass das erste Bild den Platz von drei Spalten und drei Zeilen einnehmen muss, den wir beim Einrichten des Grid-Containers nie explizit definiert haben. Der Browser hat diese Spalten und Zeilen für uns eingerichtet. Als Ergebnis, Die verbleibenden Bilder im HTML-Code fließen direkt an ihren Platz und verwenden dieselben drei Spalten und Zeilen. Und da das erste Bild alle drei Spalten in der ersten Zeile einnimmt, fließen die restlichen Bilder in weitere Zeilen, die jeweils drei Spalten enthalten, wobei jedes Bild eine einzelne Spalte einnimmt.

All dies aus einer CSS-Zeile! Das ist die Stärke des „impliziten“ Rasters“ und der automatischen Platzierung.

Für die zweite Gitterkonfiguration in dieser Demo habe ich lediglich die automatische Flussrichtung mit geändert grid-auto-flow: column genauso haben wir es früher gemacht, als wir ein platziert haben <aside> Element neben a <section>. Dies zwingt den Browser, eine zu erstellen vierte Spalte, in der es die verbleibenden Bilder platzieren kann. Und da wir drei Zeilen haben, werden die verbleibenden Bilder in derselben vertikalen Spalte platziert.

Wir müssen den Bildern einige Eigenschaften hinzufügen, um sicherzustellen, dass sie ohne Überlauf gut in das Raster passen:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Und natürlich können wir das Raster leicht aktualisieren, um mehr Bilder zu berücksichtigen, indem wir einen Wert anpassen. Das wäre die 3 in den Stilen für das große Bild. Wir haben dies:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Aber wir könnten eine vierte Spalte hinzufügen, indem wir sie einfach in ändern 4 stattdessen:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Noch besser: Lassen Sie uns das als benutzerdefinierte Eigenschaft einrichten, um die Aktualisierung noch einfacher zu machen.

Dynamische Layouts

Der erste Anwendungsfall mit der Seitenleiste war unser erstes dynamisches Layout. Jetzt werden wir uns mit komplexeren Layouts befassen, bei denen die Anzahl der Elemente die Gitterkonfiguration vorgibt.

In diesem Beispiel können wir ein bis vier Elemente haben, bei denen sich das Raster so anpasst, dass es gut zur Anzahl der Elemente passt, ohne unangenehme Lücken oder fehlende Leerzeichen zu hinterlassen.

Wenn wir ein Element haben, tun wir nichts. Das Element wird gedehnt, um die einzige Zeile und Spalte auszufüllen, die automatisch vom Raster erstellt werden.

Wenn wir das zweite Element hinzufügen, erstellen wir eine weitere (implizite) Spalte mit grid-column-start: 2.

Wenn wir ein drittes Element hinzufügen, sollte es die Breite von zwei Spalten einnehmen – deshalb haben wir verwendet grid-column-start: span 2, aber nur wenn es das ist :last-child denn wenn (und wann) wir ein viertes Element hinzufügen, sollte dieses nur eine einzige Spalte einnehmen.

Wenn wir das zusammenzählen, haben wir vier Gitterkonfigurationen nur mit zwei Erklärungen und die Magie des impliziten Gitters:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Versuchen wir es mit einem anderen:

Wir tun nichts für den ersten und zweiten Fall, wo wir nur ein oder zwei Elemente haben. Wenn wir jedoch ein drittes Element hinzufügen, teilen wir dem Browser das mit – solange es das ist :last-child — Es sollte zwei Spalten umfassen. Wenn wir ein viertes Element hinzufügen, teilen wir dem Browser mit, dass das Element in der zweiten Spalte platziert werden muss.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Fangen Sie an, den Trick zu verstehen? Wir geben dem Browser spezifische Anweisungen basierend auf der Anzahl der Elemente (mithilfe von :nth-child) und manchmal kann eine Anweisung das Layout komplett ändern.

Es sollte beachtet werden, dass die Größe nicht gleich ist, wenn wir mit unterschiedlichen Inhalten arbeiten:

Da wir keine Größen für unsere Artikel definiert haben, werden sie vom Browser basierend auf ihrem Inhalt automatisch für uns angepasst, und wir erhalten möglicherweise eine andere Größe als die, die wir gerade gesehen haben. Um dies zu überwinden, müssen wir explizit Geben Sie an, dass alle Spalten und Zeilen gleich groß sind:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hey, wir haben noch nicht mit diesen Eigenschaften gespielt! grid-auto-rows und grid-auto-columns Legen Sie die Größe der impliziten Zeilen bzw. Spalten in einem Grid-Container fest. Oder als die spezifikation erklärt es:

Das grid-auto-columns und grid-auto-rows Eigenschaften geben die Größe von Spuren an, denen keine Größe zugewiesen wurde grid-template-rows or grid-template-columns.

Hier ist ein weiteres Beispiel, bei dem wir bis zu sechs Elemente hochgehen können. Diesmal lasse ich Sie den Code sezieren. Keine Sorge, die Selektoren sehen vielleicht komplex aus, aber die Logik ist ziemlich einfach.

Selbst bei sechs Elementen brauchten wir nur zwei Deklarationen. Stellen Sie sich all die komplexen und dynamischen Layouts vor, die wir mit ein paar Zeilen Code erreichen können!

Was ist damit los grid-auto-rows und warum braucht es drei Werte? Definieren wir drei Zeilen?

Nein, wir definieren nicht drei Zeilen. Aber wir sind Definieren von drei Werten als Muster für unsere impliziten Zeilen. Die Logik ist wie folgt:

• Wenn wir eine Zeile haben, wird sie mit dem ersten Wert bemessen.
• Wenn wir zwei Zeilen haben, erhält die erste den ersten Wert und die zweite den zweiten Wert.
• Wenn wir drei Zeilen haben, werden die drei Werte verwendet.
• Wenn wir vier Zeilen haben (und jetzt kommt der interessante Teil), verwenden wir die drei Werte für die ersten drei Zeilen und den ersten Wert erneut für die vierte Zeile. Deshalb ist es eine Art Muster, das wir wiederholen, um alle impliziten Reihen zu vergrößern.
• Wenn wir 100 Zeilen haben, werden sie drei mal drei groß sein 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, usw.

Im Gegensatz zu grid-template-rows die die Anzahl der Zeilen und deren Größe definiert, grid-auto-rows nur Größenreihen, die auf dem Weg erstellt werden können.

Wenn wir zu unserem Beispiel zurückkehren, besteht die Logik darin, die gleiche Größe zu haben, wenn zwei Zeilen erstellt werden (wir verwenden die 2fr 2fr), aber wenn eine dritte Reihe erstellt wird, machen wir sie etwas kleiner.

Gittermuster

Für letzteres werden wir über Muster sprechen. Sie haben wahrscheinlich diese zwei Spaltenlayouts gesehen, bei denen eine Spalte breiter als die andere ist und jede Zeile die Platzierung dieser Spalten abwechselt.

Dieses Sortierlayout kann schwierig sein, ohne genau zu wissen, mit wie viel Inhalt wir es zu tun haben, aber die implizite automatische Platzierung von CSS Grid macht es zu einem relativen Kinderspiel.

Werfen Sie einen Blick auf den Code. Es mag komplex aussehen, aber lassen Sie es uns aufschlüsseln, weil es am Ende ziemlich einfach ist.

Das erste, was zu tun ist, ist das Muster zu identifizieren. Fragen Sie sich: „Nach wie vielen Elementen soll sich das Muster wiederholen?“ In diesem Fall ist es nach jeweils vier Elementen. Betrachten wir also zunächst die Verwendung von nur vier Elementen:

Lassen Sie uns nun das Raster definieren und das allgemeine Muster mithilfe von einrichten :nth-child Selektor zum Wechseln zwischen Elementen:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Wir sagten, dass sich unser Muster alle vier Elemente wiederholt, also werden wir es logisch verwenden 4n + x woher x reicht von 1 bis 4. Es ist etwas einfacher, das Muster auf diese Weise zu erklären:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfekt, oder? Wir haben vier Elemente und wiederholen das Muster beim fünften Element, beim neunten Element und so weiter.

die :nth-child Selektoren können schwierig sein! Chris hat einen super hilfsbereit erklärt, wie das alles funktionierteinschließlich Rezepte zum Erstellen verschiedener Muster.

Jetzt konfigurieren wir jedes Element so, dass:

1. Das erste Element muss zwei Spalten einnehmen und bei Spalte eins beginnen (grid-column: 1/span 2).
2. Das zweite Element wird in der dritten Spalte platziert (grid-column-start: 3).
3. Das dritte Element wird in der ersten Spalte platziert: (grid-column-start: 1).
4. Das vierte Element dauert zwei Spalten und beginnt bei der zweiten Spalte: (grid-column: 2/span 2).

Hier ist das in CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Wir könnten hier aufhören und fertig sein … aber wir können es besser machen! Insbesondere können wir einige Deklarationen entfernen und uns darauf verlassen, dass die automatische Platzierung des Grids die Arbeit für uns erledigt. Dies ist der kniffligste Teil des Groks und erfordert viel Übung, um zu erkennen, was entfernt werden kann.

Das erste, was wir tun können, ist zu aktualisieren grid-column: 1 /span 2 und nur verwenden grid-column: span 2 da der Browser standardmäßig das erste Element in der ersten Spalte platziert. Wir können dies auch entfernen:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Durch das Platzieren des ersten, zweiten und vierten Elements platziert das Raster automatisch das dritte Element an der richtigen Stelle. Das heißt, wir haben folgendes übrig:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Aber komm schon, wir können besser schlendern! Wir können dies auch entfernen:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Wieso den? Wenn wir das vierte Element in der zweiten Spalte platzieren und ihm erlauben, zwei volle Spalten einzunehmen, zwingen wir das Gitter, eine dritte implizite Spalte zu erstellen, wodurch wir insgesamt drei Spalten erhalten, ohne es explizit anzuweisen. Das vierte Element kann nicht in die erste Reihe gehen, da das erste Element auch zwei Spalten belegt, also fließt es in die nächste Reihe. Diese Konfiguration hinterlässt eine leere Spalte in der ersten Zeile und eine leere in der zweiten Zeile.

Ich denke, Sie kennen das Ende der Geschichte. Der Browser platziert automatisch das zweite und dritte Element an diesen leeren Stellen. So wird unser Code noch einfacher:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Alles, was Sie brauchen, sind fünf Deklarationen, um ein sehr cooles und sehr flexibles Muster zu erstellen. Der Optimierungsteil mag knifflig sein, aber man gewöhnt sich daran und lernt mit der Übung einige Tricks.

Warum nicht benutzen? grid-template-columns explizite Spalten zu definieren, da wir die Anzahl der Spalten kennen?

Wir können das schaffen! Hier ist der Code dafür:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Wie Sie sehen können, ist der Code definitiv intuitiver. Wir definieren drei explizite Gitterspalten und teilen dem Browser mit, dass das erste und vierte Element zwei Spalten einnehmen müssen. Ich kann diese Vorgehensweise nur empfehlen! Das Ziel dieses Artikels ist es jedoch, neue Ideen und Tricks zu untersuchen, die wir aus den impliziten und automatischen Platzierungsfunktionen von CSS Grid erhalten.

Der explizite Ansatz ist unkomplizierter, während ein implizites Raster erfordert, dass Sie – verzeihen Sie das Wortspiel – die Lücken füllen, in denen CSS hinter den Kulissen zusätzliche Arbeit leistet. Letztendlich glaube ich, dass Ihnen ein solides Verständnis der impliziten Grids helfen wird, den CSS-Grid-Algorithmus besser zu verstehen. Schließlich sind wir nicht hier, um das Offensichtliche zu studieren – wir sind hier, um wilde Gebiete zu erkunden!

Versuchen wir es mit einem anderen Muster, diesmal etwas schneller:

Unser Muster wiederholt sich alle sechs Elemente. Das dritte und vierte Element müssen jeweils zwei volle Reihen belegen. Wenn wir das dritte und vierte Element platzieren, scheint es, dass wir die anderen nicht berühren müssen, also versuchen wir Folgendes:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hm, nicht gut. Wir müssen das zweite Element in der ersten Spalte platzieren. Andernfalls platziert das Raster es automatisch in der zweiten Spalte.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Besser, aber es gibt noch mehr Arbeit, wir müssen das dritte Element nach oben verschieben. Es ist verlockend, es auf diese Weise in der ersten Reihe zu platzieren:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Aber das funktioniert nicht, weil es alle erzwingt 6n + 3 Elemente im selben Bereich platziert werden, was ein durcheinandergebrachtes Layout ergibt. Die wirkliche Lösung besteht darin, die anfängliche Definition des dritten Elements beizubehalten und hinzuzufügen grid-auto-flow: dense um die Lücken zu füllen. Von MDN:

[Der] „dichte“ Packungsalgorithmus versucht zu füllen in Löcher früher im Gitter, wenn später kleinere Posten anfallen. Dies kann dazu führen, dass Artikel in der falschen Reihenfolge angezeigt werden, obwohl dies Löcher füllen würde, die von größeren Artikeln hinterlassen wurden. Wenn es weggelassen wird, wird ein „Sparse“-Algorithmus verwendet, bei dem sich der Platzierungsalgorithmus immer nur „vorwärts“ im Raster bewegt, wenn Elemente platziert werden, und niemals zurückverfolgt wird, um Löcher zu füllen. Dadurch wird sichergestellt, dass alle automatisch platzierten Elemente „in Ordnung“ erscheinen, selbst wenn dies Lücken hinterlässt, die durch spätere Elemente hätten gefüllt werden können.

Ich weiß, dass diese Eigenschaft nicht sehr intuitiv ist, aber vergessen Sie sie nie, wenn Sie auf ein Platzierungsproblem stoßen. Bevor Sie verschiedene Konfigurationen vergeblich ausprobieren, fügen Sie es hinzu, da es Ihr Layout ohne zusätzlichen Aufwand reparieren kann.

Warum fügen Sie diese Eigenschaft nicht immer standardmäßig hinzu?

Ich empfehle es nicht, weil wir dieses Verhalten in einigen Fällen nicht wollen. Beachten Sie, wie die dortige Erklärung des MDN erwähnt, dass Artikel „außerhalb der Reihenfolge“ fließen, um Löcher zu füllen, die von größeren Artikeln hinterlassen wurden. Die visuelle Reihenfolge ist normalerweise genauso wichtig wie die Reihenfolge der Quellen, insbesondere wenn es um zugängliche Schnittstellen geht grid-auto-flow: dense kann manchmal zu einer Diskrepanz zwischen der visuellen und der Quellenreihenfolge führen.

Unser endgültiger Code lautet dann:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Noch einer? Lass uns gehen!

In diesem Fall werde ich nicht zu viel reden und Ihnen stattdessen eine Illustration des von mir verwendeten Codes zeigen. Versuchen Sie zu sehen, ob Sie verstehen, wie ich diesen Code erreicht habe:

Die Elemente in Schwarz werden implizit im Raster platziert. Es sollte beachtet werden, dass wir das gleiche Layout auf mehrere Arten erhalten können, als ich dorthin gekommen bin. Kannst du die auch erraten? Was ist mit der Verwendung grid-template-columns? Teilen Sie Ihre Werke im Kommentarbereich.

Ich werde Sie mit einem letzten Muster verlassen:

Ich eine Lösung haben für diesen, aber Sie sind an der Reihe zu üben. Nehmen Sie alles, was wir gelernt haben, und versuchen Sie, dies selbst zu codieren, und vergleichen Sie es dann mit meiner Lösung. Machen Sie sich keine Sorgen, wenn Sie mit etwas Ausführlichem enden – das Wichtigste ist, eine funktionierende Lösung zu finden.

Du willst mehr?

Bevor wir enden, möchte ich ein paar Stack Overflow-Fragen zu CSS Grid teilen, bei denen ich mit Antworten eingestiegen bin, die viele der Techniken verwenden, die wir hier zusammen behandelt haben. Es ist eine gute Liste, die zeigt, wie viele echte Anwendungsfälle und reale Situationen auftreten, in denen diese Dinge nützlich sind:

Wrapping up

CSS Grid gibt es schon seit Jahren, aber es gibt immer noch viele wenig bekannte und verwendete Tricks, die nicht allgemein diskutiert werden. Das implizite Raster und die automatische Platzierung sind zwei davon!

Und ja, das kann herausfordernd werden! Es hat mich viel Zeit gekostet, die Logik hinter impliziten Rastern zu verstehen, und ich kämpfe immer noch mit der automatischen Platzierung. Wenn Sie mehr Zeit damit verbringen möchten, sich mit expliziten und impliziten Rastern zu beschäftigen, finden Sie hier ein paar zusätzliche Erklärungen und Beispiele, die es wert sind, überprüft zu werden:

Ebenso möchten Sie vielleicht etwas darüber lesen grid-auto-columns im CSS-Tricks Almanac, weil Mojtaba Seyedi sehr ins Detail geht und unglaublich hilfreiche Bilder enthält, um das Verhalten zu erklären.

Wie ich zu Beginn sagte, sind die hier behandelten Methoden nicht dazu gedacht, die üblichen Methoden zum Erstellen von Grids zu ersetzen, die Sie bereits kennen. Ich erforsche einfach verschiedene Wege, die in manchen Fällen hilfreich sein können.