mitmario.dev

Abschnitt 10 · Lektion 6

Das implizite Raster

CSS Im Browser 3 Min Lesezeit 3 BeispieleLektion 6 von 9

Bis hierher hast du Raster gebaut, bei denen die Spuren definiert waren. In der Praxis ist das die Ausnahme.

Fast jedes Raster ist implizit

Zeilen, die niemand angelegt hat 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/* Nur die Spalten sind definiert. Die beiden Zeilen
   entstehen von allein, weil sechs Kacheln in ein
   dreispaltiges Raster fallen. Ihre Höhe richtet sich
   nach ihrem Inhalt, deshalb ist die erste hoch und
   die zweite flach. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  background-color: #e4e4e7;
}

.kachel {
  padding: 12px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

Der Normalfall sieht so aus: Du legst drei Spalten an und wirfst zwölf Karten hinein. Vier Zeilen entstehen, und geschrieben hat sie niemand.

Alles, was über grid-template-columns und grid-template-rows hinausgeht, landet im impliziten Raster. Der Browser legt so viele Spuren an, wie er braucht.

Ihre Größe richtet sich nach dem Inhalt, und das ist genau der Punkt, an dem es unruhig aussieht. Eine Zeile mit viel Text ist hoch, die nächste flach, und die Galerie wirkt zerrissen, obwohl formal nichts falsch ist.

Der Streifen macht daraus zwei Zahlen. Zeig auf die Galerie: Im Reiter „Werte” steht grid-template-rows: 312px 48px. Im Reiter „Regeln” steht unter deiner Regel keine einzige Zeile über Zeilen. Beide stammen also vom Browser, und die eine ist mehr als sechsmal so hoch wie die andere.

grid-auto-rows

grid-auto-rows gibt den Zeilen einen Boden 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/* minmax(140px, auto) heißt: mindestens 140px hoch,
   aber wachsen darfst du. Eine feste Höhe würde den
   langen Text abschneiden, auto allein ließe die
   flache Zeile flach. Im Fließtext steht 200px als
   üblicher Wert, hier sind es 140, damit beide Zeilen
   nebeneinander ins Bild passen. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 8px;
  padding: 8px;
  background-color: #e4e4e7;
}

.kachel {
  padding: 12px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

grid-auto-rows sagt allen automatisch entstehenden Zeilen, wie hoch sie sein sollen. Es gibt auch grid-auto-columns, das brauchst du seltener.

Der übliche Wert ist keine feste Zahl, sondern minmax(200px, auto):

  • Eine feste Höhe schneidet zu langen Inhalt ab oder lässt ihn überlaufen.
  • auto allein ist der Zustand von eben, jede Zeile so hoch wie ihr Inhalt.
  • minmax(200px, auto) ist beides: mindestens so hoch, und wachsen darf sie trotzdem.

Im Beispiel steht minmax(140px, auto), und die Wirkung ist an einer einzelnen Kachel abzulesen: Die vierte ist ohne die Zeile 48 hoch und mit ihr 140. Die hohe Zeile darüber bleibt in beiden Fällen bei 312, denn auto als Obergrenze heißt, dass sie wachsen darf.

Das ist derselbe Gedanke wie bei min-height aus Lektion 4.3. Eine Untergrenze beruhigt das Bild, eine Obergrenze macht Ärger.

grid-auto-flow

dense füllt die Lücke und sortiert dabei um 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px;
  background-color: #e4e4e7;
}

.kachel {
  padding: 12px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

.breit {
  grid-column: span 2;
  background-color: #b91c1c;
}

/* Die 3 braucht zwei nebeneinander liegende Spuren
   und passt deshalb nicht mehr in die erste Zeile.
   dense holt die 4 nach vorn in die freie Zelle. */
.mit {
  grid-auto-flow: row dense;
}

grid-auto-flow bestimmt, in welcher Richtung der Browser die Elemente einsortiert:

  • row ist der Standard: erst die Zeile voll, dann die nächste.
  • column füllt seitwärts, erst die Spalte voll, dann die nächste.
  • dense ist ein Zusatz zu beiden: row dense oder column dense.

Ohne dense arbeitet der Browser stur in Markup-Reihenfolge. Passt ein breites Element nicht mehr in den Rest der Zeile, rutscht es in die nächste und lässt eine Lücke stehen.

Mit dense schaut er zurück und zieht spätere, kleinere Elemente in die frühere Lücke. Die Galerie ist dicht gepackt, und man muss nichts von Hand umsortieren.

Der Preis steht im Beispiel: die sichtbare Reihenfolge stimmt nicht mehr mit dem Markup überein. Die 4 sitzt vor der 3, obwohl sie danach im Dokument steht. Damit hast du denselben Fall wie bei order in 9.6: Tastatur und Screenreader folgen weiter dem Dokument, das Auge nicht.

Für eine Bildergalerie, in der die Reihenfolge nichts bedeutet, ist dense genau richtig. Für eine Liste von Artikeln, in der die neuesten oben stehen sollen, ist es ein Fehler.

Zum Mitnehmen

In der Praxis ist fast jedes Raster implizit. Man legt drei Spalten an und wirft zwölf Karten hinein, und die vier Zeilen darunter hat niemand geschrieben. grid-auto-rows ist die Eigenschaft, die diesen Zeilen sagt, wie hoch sie sein sollen.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.