Zeilen und Spalten

Ein paar Karten stehen untereinander, und eigentlich sollen sie in Spalten liegen. Mit Flexbox bräuchte dafür jede Karte eine Breite. Grid spannt stattdessen zwei Achsen auf. 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 class="zelle">7</div>
  <div class="zelle">8</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 1fr;
  gap: 12px;
  padding: 16px;
  background-color: #f4f4f5;
}

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

display: grid macht aus einem Element einen Grid-Container, und grid-template-columns legt die Spalten fest. Eine Spalte oder eine Zeile des Rasters heißt Spur (track). Damit ist die Sache im Wesentlichen erledigt.

Die Kinder bekommen dabei kein eigenes CSS. Sie fallen von allein in die Zellen, eins nach dem anderen in der Reihenfolge des Markups, und wenn eine Zeile voll ist, geht es in der nächsten weiter. Mit Flexbox hättest du für dasselbe Ergebnis Breiten oder flex an die Items schreiben müssen.

Die zweite Zeile im Beispiel hat übrigens auch niemand angelegt. Acht Elemente, vier Spalten, also zwei Zeilen. Der Browser legt sie an, weil sie gebraucht werden. Das nennt sich implizites Raster und bekommt später eine eigene Lektion.

Im Inspector kannst du beides nachsehen, die Zahlen hier gelten bei der Breite, mit der die Spalte startet. Am grauen Kasten steht im Reiter „Werte“ bei grid-template-columns viermal rund 74px und darunter grid-template-rows: 67px 67px. Zwei Zeilen, ausgerechnet in Pixeln, und geschrieben hat sie niemand. Im Reiter „Regeln“ steht daneben, was wirklich in der Datei steht, also grid-template-columns: 1fr 1fr 1fr 1fr und über Zeilen kein Wort. grid-template-rows gibt es zwar auch. Du brauchst es aber selten, denn 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>Der Rest. Nur diese Spalte wächst mit.</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: 24px;
}

.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.

Damit lässt sich schon einiges bauen.

• 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.
• 240px 1fr 200px ist dasselbe mit zwei festen Seitenspalten.

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

Im Streifen geht die Rechnung auf. Am oberen Kasten steht grid-template-columns: 240px 108px, also 240 fest, 16 für die Lücke und 108 als Rest von 364. Am unteren steht 232px 116px. Das ist die Probe auf 2fr 1fr, denn die erste Spalte ist doppelt so breit wie die zweite. Mit der Lücke kommst du wieder auf 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: 24px;
  background-color: #f4f4f5;
}

.zelle {
  padding: 24px;
  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;
}

Naheliegend wären drei Spalten mit 33.33%. Das geht schief, sobald ein gap dazukommt. Mit fr passiert das nicht.

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.

Im Streifen kannst du das nachrechnen. 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 rund 48 Pixel Überschuss sind 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. Wer danach den Abstand ändern wollte, musste jedes Mal zwei Zahlen gleichzeitig anfassen. Mit fr stellt sich die Frage gar nicht. Die Lücken werden vorher abgezogen.

Als berechneten Wert gibt der Browser übrigens nie 1fr 1fr 1fr zurück. Er liefert die ausgerechneten Spaltenbreiten in Pixeln, und die hängen davon ab, wie breit die Seite gerade ist. Deshalb steht im Streifen die fertige Rechnung.

In der Aufgabe stehen sechs Projektkarten noch untereinander wie eine Liste.