Flexbox und Grid anhand konkreter Gestaltungsaufgaben

Eine Reihe aus Schaltflächen und eine dreispaltige Leistungsübersicht können auf einem Bildschirm ähnlich aussehen. Ihre Anforderungen unterscheiden sich jedoch. Die Schaltflächen sollen sich nach ihrem Inhalt richten und bei Platzmangel umbrechen. Die Leistungskarten sollen über mehrere Zeilen hinweg dieselben Spalten nutzen. Wer diese Beziehung zuerst klärt, findet leichter ein wartbares CSS-Modell.

Dieser Leitfaden entwickelt eine fiktive Angebotsübersicht mit drei Leistungen. Die Beispiele erklären Gestaltungsentscheidungen und enthalten keine behaupteten Projektergebnisse. Sie können den Quelltext in einer eigenen HTML-Datei ausprobieren. Voraussetzung sind grundlegende Kenntnisse von HTML, CSS-Selektoren und dem Boxmodell.

1. Die Beziehung zwischen den Elementen beschreiben

Beginnen Sie mit einer Frage: Sollen Elemente hauptsächlich einer Reihe oder Spalte folgen oder müssen mehrere Zeilen und Spalten gemeinsam ausgerichtet werden? Für eine Aktionsleiste ist häufig die Reihe entscheidend. Für eine Übersicht mit wiederkehrenden Karten ist oft ein gemeinsames Raster sinnvoll.

Flexbox kann zwar mehrere umgebrochene Zeilen erzeugen, doch diese Zeilen bilden keine durchgehenden gemeinsamen Spalten. Die Breiten können sich je Zeile anders verteilen. Das kann genau richtig sein, etwa bei Schlagworten mit unterschiedlicher Länge. Wird dagegen eine feste Beziehung zu den Karten der nächsten Zeile benötigt, bietet Grid den geeigneteren Ausgangspunkt.

Die MDN-Einordnung der Layoutverfahren beschreibt diese grundlegende Unterscheidung. Sie ist eine Entscheidungshilfe und kein Verbot, andere Kombinationen zu verwenden. Die tatsächliche Aufgabe und die anschließende Prüfung bleiben maßgeblich.

2. Eine Aktionsleiste mit Flexbox aufbauen

Die Beispielseite bietet drei Wege: das Angebot ansehen, den Ablauf verstehen und Kontakt aufnehmen. Die Linktexte dürfen unterschiedlich lang sein. Sie sollen nicht allein wegen der Gestaltung auf eine starre Breite gezwungen werden. Eine flexible Reihe mit Umbruch passt zu dieser Aufgabe.

<nav class="aktionen" aria-label="Nächste Schritte">
  <a href="#leistungen">Leistungen ansehen</a>
  <a href="#ablauf">Ablauf verstehen</a>
  <a href="#kontakt">Kontakt aufnehmen</a>
</nav>

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.aktionen a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .6rem 1rem;
  border: 2px solid #a40000;
  border-radius: .6rem;
  color: #a40000;
  overflow-wrap: anywhere;
}
.aktionen a:focus-visible {
  outline: 3px solid #202326;
  outline-offset: 4px;
}

gap hält den Abstand zwischen den Elementen gleichmäßig. Dadurch sind keine besonderen Randkorrekturen für das erste oder letzte Element nötig. Der Umbruch erlaubt mehrere Reihen, wenn die vorhandene Breite nicht reicht. Die Mindesthöhe lässt Platz für die Beschriftung, ohne eine starre Höhe festzulegen.

Die Werte sind bewusst nachvollziehbare Beispielwerte und kein allgemeiner Gestaltungsstandard. Prüfen Sie sie mit der tatsächlichen Schrift, Sprache und Zielgruppe. Eine große Schrift oder eine längere Übersetzung kann aus einer einzeiligen Beschriftung einen mehrzeiligen Inhalt machen. Das Layout sollte damit umgehen können.

3. Hauptachse und Querachse richtig einordnen

Bei Flexbox beziehen sich viele Eigenschaften auf die Hauptachse und die dazu quer verlaufende Achse. Welche Richtung damit gemeint ist, hängt unter anderem von flex-direction und der Schreibrichtung ab. Deshalb ist die Erklärung „justify-content ist immer horizontal“ zu ungenau.

Für die hier verwendete übliche horizontale Schreibrichtung und flex-direction: row werden Elemente zunächst entlang der Reihe angeordnet. Mit justify-content wird freier Platz auf der Hauptachse verteilt. align-items beeinflusst die Ausrichtung auf der Querachse. Bei einer Spaltenanordnung verändert sich die Zuordnung zum Bildschirm.

Die MDN-Grundlagen zu Flexbox erläutern diese Begriffe. Für ein Projekt hilft es, die gewählte Achse direkt im Browserwerkzeug sichtbar zu machen. Prüfen Sie anschließend, ob die betreffende Eigenschaft überhaupt freien Platz zum Verteilen vorfindet.

Ein häufiger Fehlversuch entsteht, wenn eine Ausrichtungseigenschaft gesetzt wird, aber der Container nur so groß wie sein Inhalt ist. Dann ist kaum eine Veränderung sichtbar. Untersuchen Sie zunächst die tatsächlichen Abmessungen. Zusätzliche Eigenschaften ohne geklärte Ausgangslage machen den Quelltext schwerer verständlich.

4. Wachsen, Schrumpfen und Mindestgrößen verstehen

Eine Zeile mit einem kurzen Symbol und einem langen Text braucht meist ein anderes Verhalten für beide Elemente. Das Symbol soll seine Größe behalten. Der Text soll den restlichen Platz nutzen und umbrechen. Diese unterschiedlichen Aufgaben sollten in den Regeln erkennbar sein.

.hinweiszeile {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.hinweiszeile__symbol {
  flex: 0 0 2rem;
}
.hinweiszeile__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

Die explizite Mindestgröße von null ist hier wichtig, weil eine inhaltsabhängige Mindestgröße sonst das gewünschte Schrumpfen behindern kann. Besonders lange Adressen oder technische Bezeichner machen dieses Problem sichtbar. Der Text darf umbrechen, statt den gesamten Seitenbereich zu verbreitern.

Verwenden Sie solche Korrekturen gezielt am betroffenen Element. Ein globales Abschneiden von Überlauf würde lediglich das Symptom verdecken und könnte Inhalte unerreichbar machen. Prüfen Sie auch, ob ein sehr langer unveränderlicher Wert fachlich überhaupt in diesen schmalen Bereich gehört oder eine andere Darstellung benötigt.

5. Eine Kartenübersicht mit Grid entwickeln

Für die Leistungsübersicht sollen Karten über mehrere Reihen hinweg gemeinsame Spalten bilden. Der Inhalt bleibt in einer sinnvollen Reihenfolge im HTML. Grid verteilt die Karten anschließend auf die verfügbare Breite. Für den Einstieg genügt ein Raster mit automatisch passender Spaltenzahl.

.leistungsliste {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.leistungsliste > li {
  min-inline-size: 0;
}

Die Spalten erhalten in diesem Beispiel eine gewünschte Mindestbreite von 16 rem. Die innere Begrenzung auf 100 Prozent verhindert, dass diese Mindestbreite einen noch schmaleren Container überragt. Der verfügbare Platz wird mit 1fr aufgeteilt. Wenn die Breite mehr Spalten zulässt, werden sie ergänzt.

Diese Regel löst nicht jede denkbare Inhaltsaufgabe. Eine Tabelle mit fachlich notwendigen Spalten oder eine komplexe Anwendung kann andere Anforderungen haben. Für eine überschaubare Kartenübersicht bietet sie aber einen gut prüfbaren Ausgangspunkt, der nicht für jede Gerätekategorie eine eigene feste Spaltenzahl benötigt.

Die Grid-Spezifikation des W3C beschreibt das zweidimensionale Rastermodell. Unsere konkrete Kombination aus Mindestbreite, Abstand und Karteninhalt ist eine eigene Beispielgestaltung. Ihre Eignung muss am tatsächlichen Inhalt geprüft werden.

6. Grid und Flexbox innerhalb einer Karte kombinieren

Die Karten besitzen unterschiedlich lange Beschreibungen. Ihre weiterführenden Links sollen trotzdem an einer vergleichbaren Stelle erscheinen. Dafür kann jede Karte intern eine flexible Spalte verwenden. Der Aktionsbereich rückt mit einem automatischen oberen Abstand an das Ende des verfügbaren Raums.

.leistungskarte {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: 1.5rem;
  border: 1px solid #767676;
  border-radius: 1rem;
  background: #fff;
}
.leistungskarte__aktionen {
  margin-block-start: auto;
  padding-block-start: 1rem;
}

Damit wird die Beschreibung nicht künstlich gekürzt. Das gemeinsame äußere Raster und die interne Ausrichtung erfüllen verschiedene Aufgaben. Grid legt die Beziehung zwischen den Karten fest. Flexbox ordnet den Inhalt der einzelnen Karte. Genau diese Aufgabenteilung macht die Kombination nachvollziehbar.

Achten Sie auf das Boxmodell. Wenn eine hundertprozentige Höhe mit zusätzlichem Innenabstand kombiniert wird, ist box-sizing: border-box eine sinnvolle Grundlage. Prüfen Sie die tatsächlich berechnete Größe im Browser. Eine rein visuelle Kontrolle bei nur einer kurzen Karte würde einen Überlauf möglicherweise übersehen.

7. Ein vollständiges kleines Beispiel ausprobieren

Die folgende Seite ist eigenständig ausführbar. Speichern Sie sie als layout.html. Sie enthält drei unterschiedlich lange Karten und demonstriert die gemeinsame Verwendung beider Verfahren. Verändern Sie die Browserbreite und ergänzen Sie längere Inhalte, um das Verhalten selbst zu untersuchen.

<!doctype html>
<html lang="de">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grid und Flexbox: Lernbeispiel</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0 auto; padding: 1.25rem; max-width: 72rem;
    font: 1.05rem/1.65 system-ui; overflow-wrap: anywhere; color: #202326; background: #f3f0e9; }
  .raster { display: grid; gap: 1rem; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
  .karte { display: flex; flex-direction: column; height: 100%;
    padding: 1.25rem; background: white; border-top: .3rem solid #b00000;
    border-radius: .75rem; min-width: 0; overflow-wrap: anywhere; }
  .karte h2 { margin-top: 0; }
  .karte p:last-child { margin-top: auto; padding-top: 1rem; }
  a { color: #a40000; text-underline-offset: .2em; }
  :focus-visible { outline: 3px solid #202326; outline-offset: 4px; }
</style>
<main>
  <h1>Drei fiktive Leistungen</h1>
  <ul class="raster">
    <li><article class="karte">
      <h2>Beratung</h2>
      <p>Eine kurze Beschreibung der Aufgabe.</p>
      <p><a href="#hinweis">Zum Beratungshinweis</a></p>
    </article></li>
    <li><article class="karte">
      <h2>Umsetzung</h2>
      <p>Diese Beschreibung ist absichtlich länger. Sie zeigt, wie sich
         unterschiedliche Inhaltsmengen auf dieselbe Kartenreihe auswirken.</p>
      <p><a href="#hinweis">Zum Umsetzungshinweis</a></p>
    </article></li>
    <li><article class="karte">
      <h2>Betreuung</h2>
      <p>Ein ergänzender Aufgabenbereich mit mittlerer Textlänge.</p>
      <p><a href="#hinweis">Zum Betreuungshinweis</a></p>
    </article></li>
  </ul>
  <h2 id="hinweis">Über das Beispiel</h2>
  <p>Die Leistungen sind fiktiv. Die Seite erklärt ausschließlich Layoutverhalten.</p>
</main>
</html>

Die drei Links führen absichtlich zu einem vorhandenen Erklärungsteil. Es gibt keine vermeintlich funktionsfähige Buchung und keine erfundene Erfolgsanzeige. Für ein echtes Projekt werden Inhalte und Ziele durch die tatsächlichen Leistungen ersetzt. Die grundlegende Lesereihenfolge bleibt dabei erhalten.

8. Visuelle Reihenfolge und Bedienreihenfolge abstimmen

Eine Layouttechnik kann Elemente visuell umordnen. Daraus folgt nicht automatisch, dass sich die zugrunde liegende Lese- und Tastaturreihenfolge entsprechend verändert. Wenn die Reihenfolge für das Verständnis wichtig ist, gehört sie deshalb zuerst in den Quelltext.

Ein Preis sollte beispielsweise nicht an einer Stelle im Dokument stehen, die beim Vorlesen weit von seiner zugehörigen Leistung entfernt ist, nur weil die visuelle Darstellung ihn passend positioniert. Prüfen Sie die Seite ohne CSS und anschließend mit der Tastatur. Die Abfolge muss ihren Zusammenhang behalten.

Die Flexbox-Spezifikation behandelt unter anderem die Anordnung flexibler Elemente. Für unsere redaktionelle Praxis gilt eine einfache Regel: Inhaltlich notwendige Reihenfolgen werden nicht durch eine rein optische Umordnung ersetzt. Das vermeidet überraschende Sprünge zwischen sichtbarer Position und tatsächlichem Fokus.

9. Typische Fehler systematisch untersuchen

Ändern Sie bei der Fehlersuche zunächst eine Ursache. Zusätzliche feste Breiten, negative Abstände und versteckter Überlauf können sich gegenseitig überlagern. Ein kleiner isolierter Test mit dem tatsächlichen problematischen Inhalt erklärt das Verhalten oft besser als weitere Korrekturen am gesamten Seitenlayout.

10. Spaltenbreiten nachvollziehbar berechnen

Ein einfaches Rechenbeispiel erklärt, warum drei Spalten mit jeweils einem Drittel Breite und zusätzlichen Abständen überlaufen können. Angenommen, ein Container besitzt eine Inhaltsbreite von 1.000 Pixeln. Zwischen drei Spalten sollen zwei Abstände von jeweils 16 Pixeln liegen. Für die Spalten bleiben dann 968 Pixel. Eine gleichmäßige Spalte ist rechnerisch ungefähr 322,67 Pixel breit.

Drei Spalten mit jeweils 33,333 Prozent würden dagegen bereits nahezu die gesamten 1.000 Pixel beanspruchen. Die beiden zusätzlichen Abstände kämen noch hinzu. Grid kann den verbleibenden Platz mit Bruchteilen aufteilen, ohne dass diese Subtraktion manuell in jede Spaltenregel geschrieben werden muss.

.drei-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

Dieses Raster bleibt absichtlich dreispaltig. Es ist deshalb noch keine vollständige responsive Lösung. Die Regel zeigt lediglich die Platzaufteilung. Für eine echte Angebotsübersicht muss zusätzlich feststehen, wie wenig Breite eine Karte sinnvoll verträgt und wann die Anzahl der Spalten wechseln soll.

Bruchteile von Pixeln in den Browserwerkzeugen sind bei solchen Aufteilungen normal. Sie begründen allein noch keinen Layoutfehler. Entscheidend ist, ob die gesamte Aufteilung funktioniert und die Darstellung stabil bleibt. Zusätzliche feste Korrekturen an der letzten Spalte können ein zuvor stimmiges Verhältnis wieder beschädigen.

Auch gleich große Bruchteile garantieren nicht automatisch, dass jeder Inhalt passend dargestellt wird. Eine lange Zeichenfolge kann weiterhin eine sinnvolle Umbruchregel benötigen. Prüfen Sie deshalb sowohl die berechneten Spalten als auch den Inhalt ihrer Elemente. Das Rechenmodell und der tatsächliche Text lösen unterschiedliche Teile der Aufgabe.

11. Den Container statt nur das Gerät betrachten

Eine Karte kann auf derselben Bildschirmbreite in sehr unterschiedlichen Bereichen stehen. Auf einer Übersichtsseite nutzt sie vielleicht die ganze Inhaltsfläche. In einer seitlichen Ergänzung ist nur ein schmaler Bereich verfügbar. Die Bildschirmbreite allein beschreibt dann nicht zuverlässig, wie viel Platz die Komponente tatsächlich besitzt.

Das automatisch passende Raster reagiert bereits auf seinen eigenen verfügbaren Platz. Für zusätzliche Änderungen innerhalb einer Komponente können Container Queries sinnvoll sein. Dieser Beitrag bleibt bei den grundlegenden Layoutverfahren. Wichtig ist zunächst die Diagnose: Welche tatsächliche Breite steht dem Element zur Verfügung?

Bei einem Code-Review lassen sich dafür drei Ansichten vorbereiten: der normale Hauptbereich, ein absichtlich schmaler Container und ein vergrößerter Text. Die konkrete Pixelzahl ist weniger wichtig als die Frage, ob der Inhalt seine Funktion behält. Eine vierte Prüfung mit einer längeren Übersetzung kann weitere Schwachstellen sichtbar machen.

Dokumentieren Sie die Entscheidung als kleine Komponentenregel. Zum Beispiel: „Die Kartenübersicht bildet so viele Spalten, wie bei der festgelegten Mindestbreite sinnvoll passen. Innerhalb der Karte bleibt die Reihenfolge Überschrift, Erklärung und weiterführender Link erhalten.“ Diese Regel erklärt die Absicht besser als eine unkommentierte Liste historisch gewachsener Bildschirmgrenzen.

Vermeiden Sie dabei starre Annahmen über typische Geräte. Ein schmaler Browser auf einem großen Monitor kann dieselbe Herausforderung erzeugen wie ein Mobilgerät. Die robustere Prüfung orientiert sich am Inhalt und am verfügbaren Raum.

12. Checkliste für die Layoutabnahme

• Die gewählte Technik passt zur Beziehung zwischen den Elementen.
• Kurze, lange und leere optionale Inhalte wurden berücksichtigt.
• Lange Adressen und technische Bezeichner erzeugen keinen Seitenüberlauf.
• Schmale Container funktionieren unabhängig von einer bestimmten Gerätebezeichnung.
• Vergrößerung und längere Übersetzungen wurden geprüft.
• Die Quelltextreihenfolge bleibt sinnvoll.
• Tastaturfokus ist sichtbar und folgt dem Inhalt.
• Keine wichtige Aussage wird durch eine feste Höhe abgeschnitten.
• Farben und Kontraste wurden im tatsächlichen Darstellungsmodus kontrolliert.
• Das Ergebnis wurde mit realen Inhalten statt ausschließlich gleich langen Blindtexten geprüft.

Häufige Fragen zu Flexbox und Grid

Ersetzt Grid Flexbox?

Nein. Die Verfahren lösen unterschiedliche Beziehungen besonders bequem. In einer einzigen Komponente können beide sinnvoll zusammenarbeiten.

Braucht ein responsives Raster immer Media Queries?

Nicht für jede Aufgabe. Automatisch passende Spalten können viele einfache Übersichten abdecken. Für andere inhaltliche Änderungen bleiben gezielte Abfragen sinnvoll.

Warum läuft ein Text trotz flex-shrink über?

Prüfen Sie die Mindestgröße des betroffenen Elements und untrennbare Inhalte. Schrumpfen allein beseitigt nicht jede inhaltsabhängige Begrenzung.

Sind gleiche Kartenhöhen immer besser?

Nein. Sie können eine Übersicht beruhigen, dürfen aber keine Inhalte abschneiden oder unnötig große Leerflächen erzeugen. Die Entscheidung hängt von Inhalt und Vergleichsaufgabe ab.

Quellen und weiterführende Beiträge

Grundlagen sind die verlinkten MDN-Anleitungen sowie die W3C-Spezifikationen zu Grid und Flexbox. Quellen geprüft am 9. November 2026. Alle konkreten Gestaltungswerte und Lernbeispiele wurden redaktionell für diesen Beitrag entwickelt.

Vertiefend: Semantisches HTML mit vollständiger Beispielseite und Verständliche Navigation entwickeln.