Die automatisch fließenden Kräfte des „Dense“-Keywords von Grid

Nehmen wir an, wir arbeiten an der Homepage einer Nachrichten-Website. Wahrscheinlich sind Sie es gewohnt, einige kartenbasierte Inhalte in einem Rasterlayout zu sehen, oder? Hier ist ein klassisches Beispiel, The New York Times

Ja, so ungefähr.

Es wird einige Karten/Elemente/Boxen/was auch immer geben, die mehr Platz benötigen als andere. Ein hervorgehobener Artikel kommt einem in den Sinn.

CSS Grid wäre hier ideal, da wir in zwei Richtungen arbeiten: Zeilen und Spalten. Außerdem verfügt es über diese integrierte Funktion, die Elemente automatisch basierend auf dem verfügbaren Platz im Grid platziert. Wenn wir auf dem übergeordneten Element einfach nur Grid definieren und nichts weiter, würde jedes Kind gleiche Abstände erhalten, entsprechend dem verfügbaren Platz in den Spalten und Zeilen.

Mit anderen Worten, es besteht keine Notwendigkeit, streng oder explizit anzugeben, wo wir unser Grid platziert haben möchten.

Eine Zeitungswebsite kann davon wirklich profitieren. Vielleicht variiert die Anzahl der Artikel auf der Seite. Vielleicht werden Anzeigen in einigen Situationen angezeigt, in anderen nicht. Selbst wenn der Inhalt unvorhersehbar ist, kann CSS Grid das Layout vorhersagbar machen, indem es Elemente automatisch einfügt.

Neun Geschichten, die perfekt passen würden, wären großartig, aber vielleicht haben wir eines Tages nur acht. Nun ja, CSS Grid kümmert sich darum, dass sich die Elemente gleichmäßig in die Zellen einfügen.

Wo es etwas knifflig werden könnte, ist, wenn wir Elemente haben, die sich über mehrere Zeilen oder Spalten erstrecken. Kehren wir zu dieser Idee des hervorgehobenen Artikels zurück und legen fest, dass er die letzten beiden Spalten einer Zeile einnehmen soll.

.article--featured {
  grid-column: 2 / span 2;
}

Vielleicht haben wir eines Tages sechs Artikel, da unser Inhalt wieder einmal etwas unvorhersehbar ist.

<div class="articles">
  <div class="article">1</div>
  <div class="article">2</div>
  <div class="article">3</div>
  <div class="article--featured">4</div>
  <div class="article">5</div>
  <div class="article">6</div>
</div>

Keine Sorge! Wir erwarten, dass die automatische Platzierungsfunktion von Grid diesen hervorgehobenen Artikel für uns umgeht. Aber wenn wir diesen hervorgehobenen Artikel dort einfügen, erhalten wir Folgendes:

Hmm, das ist nicht, was wir uns vorgestellt hatten. Es wäre viel besser, wenn sich die fünf Artikel *um* den hervorgehobenen Artikel herum anordnen würden.

Was tatsächlich passiert, ist, dass **Grid die explizite Platzierung des hervorgehobenen Artikels nimmt und ihn dort platziert, wo genügend verfügbarer Platz vorhanden ist**, um die zweiten und dritten Spalten *nach* den Artikeln einzunehmen, die ihm im Quellcode vorausgehen. Das geschieht zufällig in der zweiten Zeile und es gibt zufällig einen leeren Platz davor, da keine anderen Artikel ihm im HTML vorausgehen. Grid platziert den hervorgehobenen Artikel wie angewiesen und ordnet die restlichen Elemente entsprechend an.

Wir können Grid zwingen, die Quellreihenfolge zu ignorieren und das *nächstverfügbare* Element darum herum fließen zu lassen, auch wenn es im HTML nach dem hervorgehobenen Artikel steht.

Was ist der magische Trick mit solchen Kräften? auto-flow: dense!

.articles {
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 1fr);
}

Da haben wir es! Jetzt können wir sicher sein, dass unser Layout intakt bleibt, unabhängig davon, wie viel Inhalt in das Grid geladen wird.