CSS Grid Browser-Support und Standards 2026

Von Eike-Christian Ramcke

Aktualisiert: Juni 2026

CSS Grid ist längst kein Wagnis mehr. Seit dem koordinierten Roll-out im Frühjahr 2017 spricht praktisch jeder relevante Browser dieselbe Grid-Sprache, und die Verbreitung liegt 2026 jenseits der 97-Prozent-Marke. Die spannenden Fragen sind deshalb nicht mehr ob Grid funktioniert, sondern: Welcher Standard gilt eigentlich, wie sieht ein sauberer Fallback ohne Aufwand aus, und wie verhindern Sie, dass ein optisch perfektes Grid für Tastatur- und Screenreader-Nutzer zur Sackgasse wird. Genau das klären wir hier, mit belastbaren Daten und konkretem Code.

Verbreitung 2026: die nackten Zahlen

CSS Grid Layout wurde nicht schrittweise eingeführt, sondern in einem bemerkenswert koordinierten Schub. Innerhalb weniger Wochen im März 2017 schalteten Chrome 57, Firefox 52, Safari 10.1 und Opera 44 das ungepräfixte display: grid frei. Microsoft Edge zog mit der Chromium-Umstellung nach. Das Ergebnis: Eine der wichtigsten Layout-Technologien des Webs war faktisch über Nacht überall verfügbar.

Heute, im Jahr 2026, weist caniuse.com für CSS Grid Layout (Level 1) eine globale Unterstützung von über 97 Prozent aus. Die verbleibenden wenigen Prozent entfallen fast vollständig auf den ausgemusterten Internet Explorer 11 und einige veraltete UC-/Opera-Mini-Builds. Für die Praxis heißt das: Wenn Sie kein klar definiertes Legacy-Publikum bedienen müssen, ist ein dediziertes Grid-Fallback in den meisten Projekten Mehraufwand ohne messbaren Nutzen.

Welcher Standard gilt? Level 1, Level 2 und Subgrid

CSS Grid ist kein einzelnes Dokument, sondern eine Modul-Familie der CSS Working Group beim W3C. Maßgeblich sind zwei Spezifikationen:

• CSS Grid Layout Module Level 1 ist als W3C Candidate Recommendation der stabile Kern: grid-template-columns, grid-template-rows, grid-template-areas, die fr-Einheit, automatische Platzierung und gap. Das unterstützen alle aktuellen Engines.
• CSS Grid Layout Module Level 2 erweitert den Kern, vor allem um Subgrid. Damit erbt ein verschachteltes Grid die Spalten- und Zeilenspuren seines Elterngitters, statt ein eigenes, unabhängiges Raster aufzuspannen.

Subgrid ist die Eigenschaft, bei der Browser-Support 2026 noch eine bewusste Entscheidung verlangt. Firefox lieferte es 2019, Safari folgte 2022 und Chrome (sowie Edge) im September 2023. Damit ist Subgrid heute breit verfügbar, aber wer Besucher mit Browser-Versionen vor diesen Daten erwartet, sollte es mit @supports (grid-template-columns: subgrid) absichern. Der Grid-Kern selbst braucht diese Vorsicht nicht mehr.

Support-Matrix nach Engine

Die folgende Übersicht fasst zusammen, ab welcher Version die wichtigsten Grid-Features in den großen Engines ungepräfixt funktionieren. Die Werte stützen sich auf MDN Browser Compat Data und caniuse.com.

Versionsangaben gerundet auf das Release-Jahr. Maßgeblich bleiben die jeweils aktuellen Daten bei MDN und caniuse.

Fallbacks: progressive Verbesserung statt Polyfill

Der robusteste Fallback ist kein Polyfill, sondern eine vernünftige Grundlinie. Browser ignorieren CSS-Eigenschaften, die sie nicht verstehen. Wenn Ihr Layout also auch ohne Grid als gestapelter Block lesbar bleibt, übernimmt Grid bei modernen Browsern einfach die Feinarbeit. Das ist das Prinzip der progressiven Verbesserung.

Brauchen Sie zwei klar getrennte Layouts, nutzen Sie die @supports-Regel zur Feature-Detection direkt im CSS, ganz ohne JavaScript:

/* 1. Basis: funktioniert ueberall, auch ohne Grid */
.layout > * {
  margin-bottom: 1rem;
}

/* 2. Grid nur, wenn der Browser es kann */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .layout > * {
    margin-bottom: 0; /* Abstand uebernimmt jetzt gap */
  }
}

Genau dieses Muster generiert auch unser CSS Grid Generator: ein sauberer Grid-Code, der sich problemlos in eine solche progressive Struktur einbetten lässt. Auf Polyfills wie css-grid-polyfill für den IE 11 sollten Sie 2026 verzichten: Sie sind unvollständig, langsam und für ein faktisch totes Publikum.

Barrierefreiheit: Quellordnung vs visuelle Ordnung

Hier liegt der gefährlichste, weil unsichtbare Fehler. CSS Grid trennt die visuelle Anordnung vollständig von der Reihenfolge im HTML. Mit order, grid-row, grid-column oder dichter Auto-Platzierung lassen sich Elemente optisch beliebig verschieben. Der Haken: Tastatur-Navigation (Tab) und Screenreader folgen weiterhin der Quellordnung im DOM, nicht dem, was das Auge sieht.

Springt der visuelle Fokus also von oben links nach unten rechts und wieder hoch, während Tastaturnutzer in einer ganz anderen Sequenz landen, ist das ein handfester Verstoß gegen die Web Content Accessibility Guidelines. Betroffen sind vor allem zwei Erfolgskriterien:

• WCAG 1.3.2 Meaningful Sequence (Level A): Die Lesereihenfolge muss programmatisch erfassbar und sinnvoll sein, wenn sie für das Verständnis wichtig ist.
• WCAG 2.4.3 Focus Order (Level A): Die Reihenfolge, in der Komponenten den Fokus erhalten, muss Bedeutung und Bedienbarkeit erhalten.

Praktische Konsequenz: Halten Sie Quellordnung und visuelle Ordnung möglichst deckungsgleich. Verschieben Sie höchstens dekorative, nicht fokussierbare Inhalte. Testen Sie jedes Grid-Layout zusätzlich mit der Tab-Taste und einem Screenreader wie NVDA oder VoiceOver. Suchmaschinen-Crawler werten übrigens ebenfalls die Quellordnung, was die DOM-Reihenfolge auch zu einem SEO-Thema macht.

Praxis-Checkliste vor dem Deploy

• Aktuelle caniuse-Daten für die konkret genutzten Features geprüft, idealerweise auf die eigene Nutzerbasis gefiltert.
• Layout bleibt ohne Grid als gestapelter Block lesbar (progressive Verbesserung).
• @supports nur dort eingesetzt, wo zwei echte Layout-Varianten nötig sind.
• Subgrid mit @supports (grid-template-columns: subgrid) abgesichert, falls altes Publikum erwartet wird.
• Tab-Reihenfolge entspricht der visuellen Lesereihenfolge (WCAG 2.4.3).
• Screenreader-Durchlauf gemacht, Quellordnung ergibt inhaltlich Sinn (WCAG 1.3.2).
• Kein order/grid-row-Umsortieren von fokussierbaren Elementen.

Häufige Fragen

Quellen

• W3C, CSS Working Group: CSS Grid Layout Module Level 1
• W3C, CSS Working Group: CSS Grid Layout Module Level 2 (Subgrid)
• MDN Web Docs: CSS Grid Layout
• caniuse.com: CSS Grid Layout (Support-Tabelle) und CSS Subgrid
• W3C: Web Content Accessibility Guidelines (WCAG) 2.1, Kriterien 1.3.2 und 2.4.3

Verwandte Artikel