Zum Inhalt
wannacode

Grid: Zeilen und Spalten

Kurz gesagt: CSS Grid ordnet Items gleichzeitig in Zeilen und Spalten an: Spalten mit fr und gap, ein Katalog mit repeat(auto-fill, minmax()) und ein Seitenlayout mit grid-template-areas.

Problem

Das letzte Produkt ist riesig

Der Katalog nutzt flex-wrap aus der letzten Lektion. Vier Produkte: Drei passen in die erste Zeile, und das vierte steht allein in der zweiten Zeile und ist so breit wie die ganze Zeile.

HTML, CSS, JS

Das ist kein Fehler von Flexbox. Jede Zeile eines Flex-Containers verteilt ihren eigenen freien Platz und weiß nichts von der Zeile darüber. Die zweite Zeile hat ein Produkt, also nimmt es alles: 768px. Wir brauchen etwas, das die Spalten einmal für den ganzen Katalog zeichnet.

Die Idee

Zeilen und Spalten

Grid ist ein Layout in zwei Dimensionen: Der Container zeichnet Spalten und Zeilen, und die Items kommen der Reihe nach in die Zellen, Zeile für Zeile.

.catalog {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
  • display: grid macht das Element zum Grid-Container, und seine Kinder sind Grid-Items.
  • grid-template-columns sagt, wie viele Spalten es gibt und wie breit jede ist: 200px 1fr ist eine 200px-Spalte und eine Spalte, die den Rest nimmt.
  • fr ist ein Anteil am freien Platz, nachdem die Spalten mit fester Größe und die gaps abgezogen sind. 1fr 2fr 1fr ist 1 : 2 : 1.
  • repeat(3, 1fr) ist dasselbe wie 1fr 1fr 1fr.
  • gap ist der Abstand zwischen den Spalten und zwischen den Zeilen.

Der Unterschied zu Flexbox: Bei Flex entscheiden die Items, wie breit sie sind, und jede Zeile steht für sich. Bei Grid entscheidet der Container über die Spalten, und die Items füllen sie nur. Darum bleibt das letzte Produkt in seiner Spalte.

Probier es aus

Drei Spalten

Mach den Katalog zu einem Grid mit drei gleich breiten Spalten und 24px gap. Der Katalog ist bis zu 720px breit, also muss jede Karte, auch die letzte, (720 − 2 × 24) : 3 = 224px breit sein.

HTML, CSS, JS

Die Idee

So viele, wie passen

Drei Spalten sind am Computer in Ordnung. Auf einem Handy sind sie je 100px breit, und das Produkt lässt sich nicht lesen. Wir wollen nicht die Zahl angeben, sondern eine Regel: „Spalten von mindestens 200px, so viele, wie passen.“

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  • minmax(200px, 1fr): Die Spalte ist mindestens 200px und höchstens ein Anteil breit.
  • auto-fill statt einer Zahl: Der Browser legt so viele Spalten der kleinsten Breite an, wie mit den gaps passen.
  • Dann wird der Rest gleichmäßig verteilt (1fr), und die Spalten wachsen bis ans Ende der Zeile.

Sieh es dir an

So wird gezählt

Dieselbe Regel in einem Katalog von 960, 680 und 328px.

.catalog {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
Schritt für Schritt, in Worten
  1. Der Katalog ist ein Grid. Die Spalten sind nicht mit einer Zahl angegeben, sondern mit einer Regel: so viele, wie passen, jede mindestens 200px.
  2. Ein Katalog von 960px. Der Browser legt Spalten zu je 200px mit 16px gap an, solange sie passen: 4 × 200 + 3 × 16 = 848px. Eine fünfte würde 1064px erreichen: Sie passt nicht.
  3. Es bleiben 960 − 848 = 112px. 1fr teilt sie gleichmäßig auf: Jede Spalte ist (960 − 3 × 16) : 4 = 228px breit.
  4. Bei 680px passen drei Spalten (3 × 200 + 2 × 16 = 632). Eine vierte bräuchte 848. Jede wird (680 − 32) : 3 = 216px breit.
  5. Bei 328px, einem Handy, passt eine: Zwei bräuchten 416px. Sie nimmt die ganze Breite: 328px.
  6. Eine Regel, drei Anordnungen. Die Anzahl der Spalten folgt der Breite des Katalogs, ohne Media Queries. Die Produkte füllen die Spalten Zeile für Zeile.

Derselbe Katalog als Seite, zuerst auf einem Handy (360px), dann auf einem Computer (1000px). Der Code ist derselbe.

HTML, CSS, JS
HTML, CSS, JS

Die Spalten hängen von der Breite des Katalogs ab, nicht von der des Bildschirms. Ein Katalog in einer schmalen Spalte der Seite hat weniger Spalten, auch auf einem großen Bildschirm.

Probier es aus

Eine Regel für beide Stellen

Die Seite hat einen Katalog und eine schmale Spalte „Auch gekauft“ (220px). Beide sind .catalog mit flex-wrap, und das letzte Produkt im Katalog ist zu breit. Ändere die Regel für .catalog: Grid, Spalten von mindestens 200px, so viele, wie passen, bis zum Ende gestreckt. Die Prüfung erwartet 3 Spalten im Katalog, jede 208px breit, und 1 Spalte von 220px rechts.

HTML, CSS, JS

Die Idee

Bereiche der Seite

Grid ordnet auch die Seite selbst an: die Kopfzeile, die Filter links, den Katalog, die Fußzeile. Die Bereiche lassen sich mit Namen zeichnen:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header  header"
    "filters main"
    "footer  footer";
  gap: 16px;
}
header   { grid-area: header; }
.filters { grid-area: filters; }
  • Jede Zeile in Anführungszeichen ist eine Zeile des Grids, und jedes Wort ist eine Zelle. Ein Wort in zwei benachbarten Zellen ergibt einen Bereich, der beide nimmt: Die Kopfzeile geht über zwei Spalten.
  • grid-area: header setzt das Element in den Bereich mit diesem Namen.
  • Jede Zeile muss so viele Zellen haben, wie es Spalten gibt, und ein Bereich muss ein Rechteck sein.

Ohne Namen wird ein Item über die Nummern der Linien zwischen den Spalten platziert: grid-column: 1 / 3 geht von der ersten bis zur dritten Linie (zwei Spalten), und grid-column: 1 / -1 geht bis zur letzten Linie. grid-column: span 2 nimmt zwei Spalten, wo auch immer der Browser es hinsetzt.

Probier es aus

Die Seite

Ordne die Seite (900px) mit grid-template-areas an: oben die Kopfzeile über die ganze Breite, darunter links die Filter (220px) und rechts der Katalog, unten die Fußzeile über die ganze Breite. Der gap ist 16px.

HTML, CSS, JS

Probier es aus

Finde den Fehler

Die Seite ist auseinandergefallen: Kopfzeile, Filter, Katalog und Fußzeile liegen übereinander. In der Konsole steht kein Fehler. Welche Zeile ist die Ursache?

Wähle die Zeile mit dem Fehler.

Genauer, für Neugierige

Implizite Zeilen. grid-template-columns und grid-template-rows beschreiben das explizite Grid. Gibt es mehr Items, legt der Browser selbst Zeilen an. Sie sind implizit und auto, so hoch wie der Inhalt. Ihre Höhe setzt man mit grid-auto-rows.

auto-fill und auto-fit. Der Unterschied zeigt sich, wenn es weniger Items als Spalten gibt. In einem 960px breiten Katalog mit zwei Produkten behält auto-fill die vier Spalten, und die Produkte sind je 228px breit. auto-fit lässt die leeren Spalten weg, und die zwei Produkte werden je 472px breit.

fr und der Inhalt. 1fr ist minmax(auto, 1fr): Die Spalte wird nicht schmaler als das längste Wort darin. Zieht ein langes Wort die Spalte auseinander, hält minmax(0, 1fr) sie auf.

Grid oder Flex. Flexbox ist für eine Achse: eine Kopfzeile, eine Reihe von Buttons, eine Zeile im Warenkorb. Grid ist für zwei: ein Katalog, eine Seite, ein Dashboard. Oft gehören sie zusammen: Die Seite ist ein Grid, und die Kopfzeile darin ist Flex.

Mehr. grid-auto-flow: dense füllt leere Zellen mit späteren Items, bringt aber die Reihenfolge auf dem Bildschirm gegenüber dem Baum durcheinander. subgrid lässt ein verschachteltes Grid die Spalten seines Elternelements nutzen.

Übung

Das Produkt der Woche

Mach den Katalog (900px) zu einem Grid: Spalten von mindestens 200px, so viele, wie passen, gap 16px. Das Produkt der Woche steht an erster Stelle und nimmt zwei Spalten. Alle Zeilen sind 160px hoch, auch die, die der Browser selbst anlegt. Die Prüfung erwartet 4 Spalten von 213px, das Produkt der Woche 442px breit und das letzte Produkt 160px hoch.

HTML, CSS, JS

Test

Teste dich

1. Ein 700px breiter Katalog hat grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) und gap: 20px. Wie viele Spalten hat er?
2. Wann ist Grid die bessere Wahl gegenüber Flexbox?
3. Was macht grid-column: span 2?
4. Das Grid hat grid-template-rows: 160px, und die Produkte stehen in drei Zeilen. Wie hoch sind die zweite und die dritte Zeile?

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·