Flexible Grids

Der vielleicht größte Trick in CSS Grid ist die Fähigkeit, ein Spaltenlayout zu schreiben, das nicht explizit die Anzahl der Zeilen oder Spalten angibt, sondern diese automatisch basierend auf etwas lockeren Anweisungen und dem bereitgestellten Inhalt erstellt.

CSS Grid hat, wie alles andere, eine Lernkurve, aber nach einer Minute gibt es eine gewisse Klarheit darin. Sie richten ein Grid ein (buchstäblich Spalten und Zeilen) und platzieren dann Elemente auf diesen Zeilen. Das mentale Modell davon ist, so würde ich argumentieren, um einen Hauch einfacher als Flexbox.

Hier richte ich ein Grid ein

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

Und jetzt, wenn ich drei Kinder hätte, die ich in dieses Grid einfügen müsste…

<div class="grid">
   <div></div>
   <div></div>
   <div></div>
</div>

Sie würden perfekt in dieses Grid passen. Das ist wunderbar einfach und bietet uns eine Menge Kontrolle. Diese `1fr`-Einheit kann nach Bedarf angepasst werden. Wenn die erste 2fr statt 1fr wäre, würde sie doppelt so viel Platz einnehmen wie die anderen beiden. Wenn sie 200px wäre, wäre sie genau so breit. Der `gap` kann verbreitert und verengt werden. Es gibt alle Arten von Werkzeugen für Ausrichtung und explizite Platzierung und Reihenfolge.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 100px 1fr 2fr;
}

Denken wir aber für einen Moment über etwas anderes nach. Sagen wir, es gäbe nur 2 Kinder. Nun, sie würden automatisch in die 1. und 2. Spalte fallen, wenn wir nicht anders festgelegt hätten, wo wir sie haben wollten. Sagen wir, es gäbe 5 Kinder. Nun, das 4. und 5. würden automatisch in eine neue Zeile wechseln. Ja, Zeilen! Unser bisheriges Grid hat die Zeilen völlig ignoriert, sie sind nur implizit vorhanden. Das ist intuitiv. Sie müssen sich nicht um Zeilen kümmern, sie können automatisch erstellt werden. Sie können sie explizit angeben, müssen es aber nicht.

Hier ist der CSS-Trick: Wir können diese Freude am "nicht kümmern müssen" zusätzlich zu den Zeilen auch auf die Spalten ausweiten.

Eine Möglichkeit, dies zu tun, ist durch…

  1. Kein Setzen von `grid-template-columns`
  2. Ändern des Auto-Flows von den Standardzeilen zu `grid-auto-flow: column;`

Jetzt wird es so viele Spalten geben, wie es Kindelemente gibt! Außerdem können Sie immer noch `gap` verwenden, was gut ist.

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  margin: 0 0 1rem 0;
}
.grid > div {
  height: 100px;
  background: red;
  min-width: 10px;
}
<div class="grid">
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Aber was wir hier verloren haben, ist das Umbrechen. Es wäre schön, wenn die Anzahl der Spalten davon abhängen würde, wie viele Elemente ohne Unterbrechung der Breite des Elternelements passen könnten, und dann das für den Rest des Grids zu tun.

Das führt uns zu vielleicht dem berühmtesten und nützlichsten Code in ganz CSS Grid

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Es gibt auch ein `auto-fill`-Schlüsselwort, und diese sind etwas anders, wie Sara Soueidan erklärt.

Wenn Sie dieses Beispiel vergrößern, sehen Sie, wie sich die Anzahl der Spalten anpasst

Sehen Sie, wie sich die Anzahl der Spalten je nach verfügbarer Breite anpasst

Beachten Sie auch, dass der hier verwendete Mindestwert 200px für jede Spalte beträgt. Das ist nur eine Zahl, die Sie für Ihren Inhalt passend auswählen würden. Wenn diese Zahl beispielsweise 400px wäre, könnten Sie eine Änderung in Betracht ziehen, die es ihr erlaubt, kleiner zu werden, wenn der Bildschirm selbst kleiner als das ist. Ich habe diesen Trick zuerst von Evan Minto gesehen

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

Das besagt, dass, wenn 100 % Breite weniger als 10rem (ansonsten das Minimum) ergibt, dann diese stattdessen verwendet wird, was es sicherer für Layouts auf kleinen Bildschirmen macht.

© .