Zeilen und Spalten

Der dritte Schwerpunkt des Kurses. Flexbox verteilt auf einer Achse, Grid spannt zwei auf, und der Unterschied lässt sich in einem Satz sagen: Bei Flexbox bestimmt der Inhalt, wie viel Platz er nimmt. Bei Grid bestimmt das Raster, wo etwas hinkommt.

01 / 03Zwei Zeilen für ein Raster

<div class="raster">
  <div class="zelle">1</div>
  <div class="zelle">2</div>
  <div class="zelle">3</div>
  <div class="zelle">4</div>
  <div class="zelle">5</div>
  <div class="zelle">6</div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Zwei Zeilen für ein Raster. Die Kinder bekommen
   kein eigenes CSS, sie fallen von allein in die
   Zellen. Die zweite Zeile ist auch nirgends
   angelegt, sie entsteht, weil mehr Elemente da
   sind als Spalten. */
.raster {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background-color: #f4f4f5;
}

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

display: grid macht aus einem Element einen Rasterbehälter, grid-template-columns legt die Spalten fest. Damit ist die Sache im Wesentlichen erledigt.

Was daran auffällt: die Kinder bekommen kein eigenes CSS. Sie fallen von allein in die Zellen, eins nach dem anderen, in der Reihenfolge des Markups. Bei Flexbox hättest du für dasselbe Ergebnis Breiten oder flex an den Items gebraucht.

Und die zweite Zeile im Beispiel ist auch nirgends angelegt. Sechs Elemente, drei Spalten, also zwei Zeilen. Der Browser legt sie an, weil sie gebraucht werden. Das nennt sich implizites Raster und bekommt in 10.6 eine eigene Lektion.

Beides kannst du nachsehen. Zeig mit dem Inspector auf den grauen Kasten: Im Reiter „Werte” steht bei grid-template-columns dreimal rund 105px und darunter grid-template-rows: 59px 59px. Zwei Zeilen, ausgerechnet in Pixeln, und geschrieben hat sie niemand. Im Reiter „Regeln” steht daneben, was wirklich in der Datei steht: grid-template-columns: 1fr 1fr 1fr, und über Zeilen kein Wort. grid-template-rows gibt es zwar, du brauchst es aber selten: Zeilen entstehen von selbst, sobald Inhalt da ist.

02 / 03Die Einheit fr

<p class="titel">240px 1fr: die Seitenspalte steht fest</p>
<div class="layout">
  <aside>240px</aside>
  <main>Alles, was übrig bleibt. Zieh an der Trennlinie, dann wird die Seite breiter: nur diese Spalte ändert sich.</main>
</div>

<p class="titel">2fr 1fr: doppelt so breit wie der Nachbar</p>
<div class="layout verhaeltnis">
  <aside>2fr</aside>
  <main>1fr</main>
</div>

*,
*::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;
}

/* px und fr lassen sich mischen. Die feste Spalte
   wird zuerst abgezogen, der Rest ist der freie
   Platz, den fr aufteilt. */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.verhaeltnis {
  grid-template-columns: 2fr 1fr;
}

aside {
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #18181b;
}

main {
  padding: 16px;
  background-color: #f4f4f5;
}

fr steht für fraction, also Anteil, und zwar am freien Platz. Frei ist, was nach Abzug aller festen Breiten und aller Lücken übrig bleibt.

Daraus folgt, was du damit bauen kannst:

• 1fr 1fr 1fr sind drei gleich breite Spalten.
• 2fr 1fr ist eine doppelt so breite neben einer schmalen.
• 240px 1fr ist eine feste Seitenspalte neben einem Inhaltsbereich, der den Rest nimmt. Das ist der häufigste Fall überhaupt.
• 240px 1fr 200px ist dasselbe mit zwei festen Rändern.

Mischen ist also nicht nur erlaubt, es ist der Normalfall. Die festen Spuren werden zuerst abgezogen, und was dann noch da ist, teilen die fr unter sich auf.

Im Streifen wird daraus eine Rechnung, die aufgeht. Am oberen Kasten steht grid-template-columns: 240px 108px: 240 fest, 16 für die Lücke, und die 108 sind der Rest von 364. Am unteren steht 232px 116px, und das ist die Probe auf 2fr 1fr: Die erste Spalte ist genau doppelt so breit wie die zweite, zusammen mit der Lücke wieder 364.

03 / 03Warum nicht einfach Prozent

<p class="titel">33.33% je Spalte: passt nicht mehr, sobald gap dazukommt</p>
<div class="raster prozent">
  <div class="zelle">1</div>
  <div class="zelle">2</div>
  <div class="zelle">3</div>
</div>

<p class="titel">1fr je Spalte: passt immer</p>
<div class="raster anteil">
  <div class="zelle">1</div>
  <div class="zelle">2</div>
  <div class="zelle">3</div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

.raster {
  display: grid;
  gap: 24px;
  margin-bottom: 20px;
  background-color: #f4f4f5;
}

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

/* Prozent rechnet auf die volle Breite. Dreimal
   33.33 Prozent sind schon die ganze Breite, die
   beiden Lücken kommen obendrauf und passen nicht
   mehr. Das Raster läuft nach rechts über. */
.prozent {
  grid-template-columns: 33.33% 33.33% 33.33%;
}

/* fr rechnet auf den freien Platz, und frei ist,
   was nach Abzug der Lücken übrig bleibt. */
.anteil {
  grid-template-columns: 1fr 1fr 1fr;
}

Der naheliegende Gedanke ist, drei Spalten mit 33.33% zu bauen. Das geht schief, sobald ein gap dazukommt, und es ist der Grund, warum fr überhaupt erfunden wurde.

Prozentwerte rechnen auf die volle Breite des Containers. Dreimal 33,33 Prozent sind zusammen schon die ganze Breite. Die beiden Lücken von je 24px kommen obendrauf, und das Raster läuft rechts aus dem Container heraus.

Der Streifen rechnet es dir vor. Am oberen Raster stehen bei grid-template-columns drei Spuren von je rund 121px bei gap: 24px: dreimal gut 121 plus zweimal 24 sind knapp 412, und der Container ist 364 breit. Die 48 Pixel Überschuss sind exakt die beiden Lücken. Am unteren stehen drei Spuren von je rund 105px, und die drei plus 48 sind wieder genau 364.

Vor Grid hat man das mit calc(33.33% - 16px) gelöst, und dann musste man beim Ändern des Abstands zwei Zahlen gleichzeitig anfassen. Mit fr stellt sich die Frage nicht: die Lücken sind kein freier Platz, sie werden vorher abgezogen.

Das ist übrigens der Grund, warum grid-template-columns in diesem Kurs nirgends geprüft wird, und du hast es oben schon gesehen: Der Browser gibt als berechneten Wert nicht 1fr 1fr 1fr zurück, sondern die ausgerechneten Spaltenbreiten in Pixeln, und die hängen daran, wie breit die Seite gerade ist. Für dich ist das ein Gewinn, weil im Streifen die fertige Rechnung steht; für eine Prüfung ist es unbrauchbar. Geprüft wird deshalb das Ergebnis: welche Karten stehen in einer Zeile.