grid-auto-flow : CSS Grid :: flex-direction : Flexbox

Wenn ein Elternelement auf display: flex gesetzt wird, werden seine Kindelemente von links nach rechts ausgerichtet, so:

Nun, eine der netten Dinge, die wir mit Flexbox machen können, ist, die Richtung zu ändern, sodass die Kindelemente vertikal übereinander in einer Spalte gestapelt werden. Das können wir mit der Eigenschaft flex-direction (oder mit dem Kurzschreibungs-Property flex-flow) erreichen.

Okay, cool. Aber wie würde ich so etwas mit CSS Grid machen? Sagen wir, ich möchte, dass alle diese Kindelemente so ausgerichtet werden:

1 3 5 7
--------
2 4 6 8

…anstatt so:

1 2 3 4
--------
5 6 7 8

Standardmäßig werden die Elemente, wenn ich ein Elternelement für CSS Grid einrichte, von links nach rechts positioniert, genau wie bei Flexbox. Im folgenden Beispiel weise ich dem Grid an, 6 Spalten und 2 Zeilen zu haben, und lasse dann die Kindelemente jede Spalte der ersten Zeile füllen, bevor sie die Spalten der zweiten Zeile füllen. Sie kennen das Standardverhalten beim Zeilenumbruch.

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
  gap: 20px;
}

Im Grunde möchte ich hier das Gegenteil: Ich möchte, dass unsere Kindelemente Spalte 1, Zeile 1 und Zeile 2 füllen und dann zur nächsten Spalte übergehen. Mit anderen Worten, Spaltenumbruch! Ich weiß, dass ich, wenn ich ein Grid mit Zeilen und Spalten erstelle, diese Elemente individuell in diese Positionen platzieren könnte. So:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 150px);
}

.child-1 {
  grid-column: 1;
  grid-row: 1;
}

.child-2 {
  grid-column: 1;
  grid-row: 2;
}

.child-3 {
  grid-column: 2;
  grid-row: 1;
}

/* etc, etc. */

Okay, fein! Das bringt mich zu dem, was ich will, aber es ist eine Riesenqual, die Position jedes Elements einzeln festlegen zu müssen. Es fühlt sich an, als würde ich position: absolute verwenden und es fühlt sich nicht besonders intelligent an. Was ist, wenn ich dieses Layout einfach für mich erledigen lassen wollte, sodass sich jedes neue Kindelement an der richtigen Stelle ausrichtet… richtig?

Was ich (glaube ich) frage, ist: Gibt es eine CSS Grid-Version von flex-direction: column?

Nun, nach einigem Suchen hat mich Rachel Andrew in ihrem ziemlich ausgezeichneten Spielplatz, Grid by Example, auf die richtige Antwort hingewiesen. Und wie Sie in dieser Demo sehen können, zeigt Rachel uns, wie das geht:

Neat! Rachel macht das mit der Eigenschaft grid-auto-flow: Sie teilt einem Grid-Container mit, wie der unbesetzte Platz mit Kindelementen gefüllt werden soll. Das kann ich also einfach so machen:

.parent {
  display: grid;
  grid-auto-flow: column;
  /* set up columns and rows here */
}

Standardmäßig füllen die Kindelemente eines Grids jede Spalte, bis eine Zeile gefüllt ist, und dann fließen sie zur nächsten darunter. Deshalb ist der Standardwert für grid-auto-flow auf row eingestellt, da wir zuerst die Zeilen des Grids füllen. Aber wenn wir es auf column setzen, füllt jedes neue Element den gesamten Platz von Spalte 1, bevor es zu Spalte 2 usw. übergeht.

.parent {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
}

Das ist es, was der Flow-Teil von grid-auto-flow bedeutet, und ich habe die Eigenschaft lange ignoriert, weil sie (lachen Sie nicht) beängstigend schien. Allein das Lesen des Wortes grid-auto-flow reicht aus, um meinen Laptop ausschalten und ins Meer laufen zu wollen.

Aber! Es ist eine ziemlich nützliche Eigenschaft und ergibt viel Sinn, besonders wenn man sie als die CSS Grid-Version von flex-direction betrachtet.