Grid Praxis-Layouts

Das klassische 12-Spalten-System, wie du es von Bootstrap kennst, lässt sich mit CSS Grid in zwei Zeilen bauen. Items platzierst du mit span, und die Mathematik stimmt immer.

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}

.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

<div class="demo">
<div class="grid-12">
  <div class="col col-12">span 12</div>
  <div class="col col-6">span 6</div>
  <div class="col col-6">span 6</div>
  <div class="col col-4">span 4</div>
  <div class="col col-4">span 4</div>
  <div class="col col-4">span 4</div>
  <div class="col col-3">span 3</div>
  <div class="col col-3">span 3</div>
  <div class="col col-3">span 3</div>
  <div class="col col-3">span 3</div>
  <div class="col col-8">span 8</div>
  <div class="col col-4">span 4</div>
</div>
</div>

Ein typisches Dashboard mit Header, Sidebar, Hauptbereich und Widgets. grid-template-areas macht die Struktur sofort lesbar, und verschachteltes Grid im Widget-Bereich sorgt für flexible Inhalte.

.dashboard {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "sidebar widgets widgets";
  grid-template-columns: 140px 1fr 1fr;
  grid-template-rows: 45px 1fr auto;
  gap: 8px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }

/* Verschachteltes Grid für Widgets */
.widgets {
  grid-area: widgets;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

<div class="demo">
<div class="dashboard">
  <div class="d-header">Dashboard</div>
  <div class="d-sidebar">
    <div class="sidebar-item">Übersicht</div>
    <div class="sidebar-item">Statistiken</div>
    <div class="sidebar-item">Einstellungen</div>
  </div>
  <div class="d-main">Hauptbereich</div>
  <div class="d-widgets">
    <div class="widget w1">Widget 1</div>
    <div class="widget w2">Widget 2</div>
  </div>
</div>
</div>

Ein asymmetrisches Layout, bei dem der Featured-Artikel einen großen Bereich einnimmt und kleinere Artikel drumherum angeordnet sind. Das erreichst du mit grid-column: span und grid-row: span.

.magazine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
}

/* Featured: 2 Spalten, 2 Zeilen */
.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Breiter Artikel: 2 Spalten */
.medium { grid-column: span 2; }

<div class="demo">
<div class="magazine">
  <div class="article featured">Featured Artikel</div>
  <div class="article small">Artikel 2</div>
  <div class="article small">Artikel 3</div>
  <div class="article medium">Artikel 4 (breit)</div>
  <div class="article small">Artikel 5</div>
</div>
</div>

Mit repeat(auto-fit, minmax(250px, 1fr)) erstellt der Browser automatisch so viele Spalten wie nötig. Die Karten sind mindestens 250px breit und füllen den Rest mit 1fr. Kein JavaScript, keine Media Queries.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* auto-fit: leere Spalten werden zusammengeklappt
   minmax(250px, 1fr): mindestens 250px, maximal 1fr
   → Responsive ohne Media Queries! */

<div class="demo">
<div class="card-grid">
  <div class="card">
    <h3>HTML</h3>
    <p>Struktur und Inhalt</p>
  </div>
  <div class="card">
    <h3>CSS</h3>
    <p>Styling und Layout</p>
  </div>
  <div class="card">
    <h3>JavaScript</h3>
    <p>Interaktivität</p>
  </div>
  <div class="card">
    <h3>TypeScript</h3>
    <p>Typsicherheit</p>
  </div>
  <div class="card">
    <h3>React</h3>
    <p>UI-Bibliothek</p>
  </div>
  <div class="card">
    <h3>Astro</h3>
    <p>Web-Framework</p>
  </div>
</div>
</div>

Für komplexere Layouts, bei denen sich die Struktur auf verschiedenen Bildschirmgrößen grundlegend ändert, kombinierst du grid-template-areas mit Media Queries.

/* Mobile: alles gestapelt */
.layout {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Tablet: 2-Spalten */
@media (min-width: 768px) {
  .layout {
    grid-template-areas:
      "header header"
      "nav    nav"
      "main   aside"
      "footer footer";
    grid-template-columns: 1fr 200px;
  }
}

/* Desktop: 3-Spalten */
@media (min-width: 1024px) {
  .layout {
    grid-template-areas:
      "header header header"
      "nav    main   aside"
      "footer footer footer";
    grid-template-columns: 160px 1fr 200px;
  }
}

<div class="demo">
<div class="responsive-layout">
  <div class="rl-header">Header</div>
  <div class="rl-nav">Navigation</div>
  <div class="rl-main">Hauptinhalt</div>
  <div class="rl-aside">Sidebar</div>
  <div class="rl-footer">Footer</div>
</div>
</div>

Responsive Grid-Layouts sind eine häufige Quelle für Barrierefreiheitsprobleme. Wenn sich das visuelle Layout zwischen Mobile, Tablet und Desktop stark unterscheidet, kann die Lesereihenfolge für Screenreader inkonsistent oder verwirrend werden.

Kritische Punkte:

• DOM-Reihenfolge über alle Breakpoints testen: Die Reihenfolge muss für Mobile, Tablet und Desktop logisch bleiben. Wenn die Sidebar auf Mobile nach oben wandert, sollte sie auch im DOM vor dem Hauptinhalt stehen.
• Tab-Reihenfolge bei verschiedenen Viewport-Größen prüfen: Teste mit der Tab-Taste, ob die Fokusreihenfolge bei jedem Breakpoint Sinn ergibt. Sprünge zwischen weit entfernten Bereichen sind verwirrend.
• Komplexe Magazine-Layouts kritisch prüfen: Asymmetrische Layouts mit verschieden großen Karten können eine visuelle Reihenfolge erzeugen, die von der DOM-Reihenfolge abweicht. Für Bildergalerien ist das egal, bei Artikellisten problematisch.

Best Practice: Baue deine Layouts “Mobile First” und erweitere sie für größere Screens. So bleibt die DOM-Reihenfolge meist natürlich. Teste regelmäßig mit Screenreader und Tastatur, nicht nur visuell.

• auto-fit statt auto-fill für responsive Grids: auto-fit klappt leere Spalten zusammen, sodass deine Items den gesamten Platz nutzen. Das ist in den meisten Fällen das gewünschte Verhalten.
• Benannte Areas für komplexe Layouts: Wenn dein Layout mehr als 3-4 Bereiche hat, sind grid-template-areas viel lesbarer als Liniennummern. Der CSS-Code liest sich wie eine visuelle Darstellung des Layouts.
• minmax() statt fester Breiten: minmax(200px, 1fr) gibt deinen Spalten eine Mindestbreite, lässt sie aber flexibel wachsen. Das ist robuster als feste Pixelwerte.
• Grid für 2D, Flexbox für 1D: Verwende Grid, wenn du Zeilen UND Spalten gleichzeitig kontrollieren willst. Für einfache Reihen (Navigation, Button-Gruppen) ist Flexbox oft einfacher.
• Verschachteltes Grid ist normal: Ein Grid-Item kann selbst ein Grid-Container sein. Das ist kein Anti-Pattern, sondern der empfohlene Weg für komplexe Layouts wie Dashboards.
• Teste mit gap: Ein gap von 8-16px macht den Unterschied zwischen einem professionellen und einem zusammengequetschten Layout. gap ist sauberer als Margins, weil kein Abstand am Rand entsteht.
• Mobile First bei grid-template-areas: Definiere zuerst das Mobile-Layout (gestapelt) und erweitere es in Media Queries für Tablet und Desktop. So funktioniert dein Layout auch ohne CSS.

Alle in diesem Artikel verwendeten Grid-Eigenschaften werden von allen modernen Browsern vollständig unterstützt.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Grid-Layouts funktionieren in HTML-Emails nur in Apple Mail und Thunderbird teilweise. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

• Apple Mail

  Teilweise

  Grundlegende Grid-Layouts werden unterstützt

• Gmail

  Keine

  Grid wird komplett ignoriert

• Outlook

  Keine

  Kein Grid-Support, Tabellen-Layouts verwenden

• Thunderbird

  Teilweise

  Grundlegende Grid-Layouts werden unterstützt

• Yahoo Mail

  Keine

  Kein Grid-Support