Komplexe Layouts

Zwei jüngere Ergänzungen lösen Probleme, für die es lange nur Notlösungen gab: Elemente in verschiedenen Karten fluchten nicht, und eine Komponente weiß nicht, wie viel Platz sie bekommt.

Was du am Ende kannst

• Inhalte verschiedener Karten mit Subgrid ausrichten
• Komponenten mit Container Queries an ihren Platz anpassen
• entscheiden, wann eine Media Query und wann eine Container Query passt

Live-Coding zum Mitmachen

⤓ demo-17-komplexe-layouts.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Subgrid

Das Problem: Drei Karten stehen im Raster nebeneinander, aber jede ordnet ihr Inneres für sich. Sind Titel unterschiedlich lang, stehen Texte und Links auf verschiedenen Höhen.

Mit grid-template-rows: subgrid übernimmt eine Karte die Zeilen des äußeren Rasters.

Titel, Text und Links stehen jeweils auf einer Höhe

.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.karte { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0.25rem; padding: 0.5rem; background: #e0e7ff; }
h4, p { margin: 0; }

<div class="raster">
  <div class="karte"><h4>Kurz</h4><p>Wenig Text.</p><a href="#">Öffnen</a></div>
  <div class="karte"><h4>Ein deutlich längerer Titel über zwei Zeilen</h4><p>Auch hier wenig.</p><a href="#">Öffnen</a></div>
  <div class="karte"><h4>Kurz</h4><p>Hier steht viel mehr Text, und die Links stehen trotzdem auf einer Linie.</p><a href="#">Öffnen</a></div>
</div>

.karte {
  display: grid;
  grid-row: span 3;              /* die Karte belegt drei Zeilen des Rasters */
  grid-template-rows: subgrid;   /* und verwendet genau diese für ihre Kinder */
}

Die Zahl hinter span muss zu den Kindern passen. Ein Formular mit fluchtenden Beschriftungen und Feldern geht nach demselben Muster.

Container Queries

Media Queries fragen das Fenster. Eine Karte in einer schmalen Seitenleiste hat aber wenig Platz, auch wenn das Fenster riesig ist. Container Queries fragen den umgebenden Bereich.

Dieselbe Karte an zwei Stellen

.bereich { container-type: inline-size; margin-bottom: 0.5rem; }
.karte { padding: 0.5rem; background: #e0e7ff; }
.bild { height: 3rem; background: #6366f1; }
@container (min-width: 22rem) {
  .karte { display: flex; gap: 0.5rem; }
  .bild { flex: 0 0 5rem; height: auto; }
}

<div class="bereich" style="max-width: 16rem">
  <div class="karte"><div class="bild"></div><p>Schmaler Bereich: Das Bild steht oben.</p></div>
</div>
<div class="bereich">
  <div class="karte"><div class="bild"></div><p>Breiter Bereich: Dieselbe Karte, das Bild steht daneben.</p></div>
</div>

Zwei Schritte:

/* 1. Ein Vorfahr wird zum Container */
.spalte {
  container-type: inline-size;
}

/* 2. Die Regel fragt dessen Breite ab */
@container (min-width: 28rem) {
  .karte { display: flex; }
}

Ein Container darf seine eigene Größe nicht aus seinem Inhalt ableiten. Das stört bei Blöcken in voller Breite nicht, ein schrumpfendes Flex-Item mit container-type kann aber auf null zusammenfallen.

Dazu kommen Einheiten: 1cqi ist ein Prozent der Containerbreite. So kann auch die Schrift mitwachsen.

Frage	Werkzeug
Wie ist die ganze Seite aufgebaut?	Media Query
Wie sieht diese Karte aus, je nach Platz?	Container Query

Live-Coding: Wichtige Aufgaben und flexible Karten

Im Starter stehen die Kacheln „Wichtig diese Woche“. Die Links stehen auf unterschiedlichen Höhen. Das reparieren wir. Die Karten im Brett passen sich dann ihrer Spalte an.

stil.css

/* Subgrid: Jede Kachel erstreckt sich über drei Zeilen des äußeren Rasters.
   Titel, Text und Link fluchten dadurch über alle Kacheln. */
.hervorgehoben {
  grid-template-rows: auto;
}

.kachel {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--abstand-s);
}

/* Container Queries: Die Spalte ist der Bezugspunkt, nicht das Fenster */
.spalte {
  container-type: inline-size;
}

/* In einer breiten Spalte steht der Fuß neben dem Text */
@container (min-width: 28rem) {
  .karte {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--abstand-m);
  }

  .karte h3 {
    grid-column: 1 / -1;
  }

  .karte-fuss {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    margin-top: 0;
  }
}

Übung

Starter für die Übung

⤓ uebung-17-komplexe-layouts.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, pakete.css, pakete.html, stil.css

pakete.html zeigt drei Pakete und zwei gleiche Infokarten. Schreibe das Layout in pakete.css.

Stufe 1: Raster

.pakete wird ein Raster mit so vielen Spalten, wie passen.

Stufe 2: Subgrid

Titel, Text, Preis und Knopf aller Pakete stehen jeweils auf einer Höhe.

Stufe 3: Container Query

.breit und .schmal werden Container. Ab einer Breite von 30rem steht der Knopf der .info rechts statt darunter.

Für Schnelle

Lass die Überschrift der .info mit cqi und clamp() mit dem Container wachsen.