mitmario.dev

Abschnitt 10 · Lektion 6

Das implizite Raster

CSS Im Browser 3 Min Lesezeit 3 BeispieleLektion 6 von 9

Meistens legt man drei Spalten an und wirft zwölf Karten hinein. Vier Zeilen entstehen, und geschrieben hat sie niemand.

Zeilen, die der Browser anlegt

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: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

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.

Wie groß sie werden, richtet sich nach dem Inhalt, und das sieht unruhig aus. Eine Zeile mit viel Text ist hoch, die nächste flach, und die Galerie wirkt zerrissen, obwohl formal gar nichts falsch ist.

Im Streifen wird das zu zwei Zahlen. An der Galerie steht im Reiter „Werte“ grid-template-rows: 320px 56px. Im Reiter „Regeln“ steht unter deiner Regel keine einzige Zeile über Zeilen. Beide Höhen stammen also vom Browser. Und die eine ist mehr als fünfmal 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. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 8px;
  padding: 8px;
  background-color: #e4e4e7;
}

.kachel {
  padding: 16px;
  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 ein minmax() mit auto als Obergrenze, im Beispiel minmax(140px, 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(140px, auto) ist beides, mindestens so hoch, und wachsen darf die Zeile trotzdem.

Ablesen kannst du das an einer einzelnen Kachel. Die vierte ist ohne die Zeile 56 hoch und mit ihr 140. Die hohe Zeile darüber bleibt in beiden Fällen bei 320, denn auto als Obergrenze heißt, dass sie wachsen darf, so weit ihr Inhalt es verlangt.

Das ist derselbe Gedanke wie bei min-height aus Lektion 4.3. Eine Untergrenze statt einer festen Höhe.

grid-auto-flow

dense füllt das Loch 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(4, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background-color: #e4e4e7;
}

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

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

/* Die 4 braucht drei nebeneinander liegende Spuren
   und passt deshalb nicht mehr in die erste Zeile.
   dense holt die 5 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 der Reihenfolge des Markups. Passt ein breites Element nicht mehr in den Rest der Zeile, rutscht es in die nächste und lässt ein Loch stehen.

Mit dense schaut er zurück und zieht spätere, kleinere Elemente in das frühere Loch. Die Galerie ist dicht gepackt, und von Hand umsortieren musst du nichts.

Das hat einen Preis, denn die sichtbare Reihenfolge stimmt nicht mehr mit dem Markup überein. Im Beispiel sitzt die 5 vor der 4, obwohl sie im Dokument danach steht. Bei order in 9.2 war es dasselbe, Tastatur und Screenreader folgen weiter dem Dokument, das Auge nicht.

In einer Bildergalerie, in der die Reihenfolge nichts bedeutet, ist dense richtig. In einer Liste von Artikeln, in der die neuesten oben stehen sollen, ist es ein Fehler.

In der Aufgabe hat eine Galerie oben rechts ein Loch, und ihre Zeilen sind so hoch wie ihr Text.

Zum Mitnehmen

Spuren, die niemand angelegt hat, sind so groß wie ihr Inhalt, bis grid-auto-rows ihnen eine Größe gibt. dense füllt Löcher und ändert dabei die sichtbare Reihenfolge.

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.