CSS-Gitter-Generator

So funktioniert es

1. Grid-Maße festlegen: Geben Sie die Anzahl der Spalten und Zeilen für Ihr Grid-Layout ein.
2. Tracks definieren: Stellen Sie die Breite jeder Spalte und die Höhe jeder Zeile mit fr-Einheiten, Pixeln, Prozentwerten, auto oder minmax() ein.
3. CSS kopieren: Die generierten Eigenschaften display: grid, grid-template-columns, grid-template-rows und gap sind bereit, in Ihr Stylesheet eingefügt zu werden.

Warum den CSS-Grid-Generator nutzen?

CSS Grid ist das mächtigste Layoutsystem in CSS, es ermöglicht komplexe zweidimensionale Layouts, die früher Tabellen, Floats oder JavaScript erforderten. Doch grid-template-columns, fr-Einheiten, minmax(), repeat() und benannte Bereiche zu beherrschen, erfordert Übung. Dieser visuelle Generator lässt Sie jedes Grid-Layout durch Klicken und Ziehen aufbauen und gibt sauberes CSS aus, das Sie direkt verwenden oder studieren können, um Ihr Verständnis von Grid zu vertiefen.

Funktionen

• Visueller Grid-Builder: Klicken Sie, um Spalten- und Zeilen-Tracks visuell zu definieren.
• fr-Einheit-Unterstützung: Verwenden Sie flexible fr-Einheiten für responsive proportionale Spalten.
• minmax()-Shortcut: Erzeugen Sie einfach responsive Spalten mit Mindest- und Höchstgrößen-Beschränkungen.
• Abstandskontrolle: Stellen Sie column-gap und row-gap unabhängig voneinander ein.
• Benannte Bereiche: Definieren Sie grid-template-areas mit einer visuellen Bereich-Mal-Oberfläche.

Häufige Fragen

Was ist eine „fr"-Einheit in CSS Grid?

Die Einheit fr (Fraction) verteilt verfügbaren Platz proportional. In einem 3-Spalten-Grid mit 1fr 2fr 1fr erhält die mittlere Spalte doppelt so viel Platz wie die äußeren Spalten. fr-Einheiten füllen den verbleibenden Platz, nachdem feste Tracks zugewiesen wurden.

Wie erstelle ich ein responsives Grid ohne Media Queries?

Verwenden Sie repeat(auto-fill, minmax(200px, 1fr)) als Wert für grid-template-columns. Das erzeugt so viele Spalten, wie bei der Mindestgröße passen, und dehnt sich aus, um den verfügbaren Platz zu füllen. Elemente fließen automatisch um, wenn sich die Containerbreite ändert.

Was ist der Unterschied zwischen grid-template und grid-auto?

grid-template-columns/rows definiert explizite Tracks, die Sie angeben. grid-auto-columns/rows definiert die Größe impliziter Tracks, Spalten und Zeilen, die automatisch erzeugt werden, wenn Elemente das explizite Grid überschreiten.

Eine kurze Geschichte von CSS Grid

Vor CSS Grid durchliefen Weblayouts drei schmerzhafte Epochen. Tabellenbasierte Layouts (1995-2008) missbrauchten das <table>-Element für visuelle Strukturen, mit dem «Zerschneiden» von Photoshop-Kompositionen in HTML-Raster. Float-basierte Layouts (2008-2013) ersetzten Tabellen durch die float-Eigenschaft und erforderten «clearfix»-Tricks wie Nicolas Gallaghers micro-clearfix (2011), um umbrochene Kinder einzudämmen. Flexbox (CSS Flexible Box Layout Module Level 1, W3C-Empfehlung 2018) löste eindimensionale Layouts, kämpfte aber mit echten zweidimensionalen Rastern. Die CSS-Grid-Geschichte begann mit Microsofts -ms-grid-Implementierung in Internet Explorer 10 (2012), einer frühen Version, die die W3C-Spezifikation beeinflusste. Der erste öffentliche W3C-Arbeitsentwurf des CSS Grid Layout Module Level 1 erschien im April 2011, aber echte Dynamik kam durch die Verfechterarbeit von Rachel Andrew (ihr Buch Get Ready for CSS Grid Layout, 2016) und Jen Simmons (Mozilla-Developer-Advocate, Konferenzrundgang 2016-2018). Das Browser-Rennen entschied sich in einem bemerkenswerten Zwei-Monats-Fenster im März 2017: Chrome 57, Firefox 52, Safari 10.1 und Edge 16 lieferten alle Grid ohne Präfix mit nur wenigen Wochen Abstand. Das W3C kennzeichnete Grid Level 1 als Candidate Recommendation im Dezember 2016; die finale W3C-Empfehlung kam im August 2020. Subgrid (Level 2) wurde in Firefox 71 (Dez. 2019), Safari 16 (Sept. 2022) und Chrome 117 (Sept. 2023) ausgeliefert. Die nächste Grenze ist das vorgeschlagene Masonry-Layout (CSS Working Group 2020-Vorschlag, hinter Flag in Firefox seit 2021).

Die Anatomie eines CSS-Rasters

• Der Raster-Container. display: grid (oder display: inline-grid) verwandelt jedes Element in einen Raster-Kontext. Direkte Kinder dieses Elements werden zu «Raster-Items» und nehmen am Raster-Layout teil. Enkel sind nicht betroffen, es sei denn, sie setzen ebenfalls display: grid.
• grid-template-columns und grid-template-rows. Definieren die expliziten Spuren (Spalten und Zeilen). Werte können fest (px, em, rem), flexibel (fr, die in der CSS-Grid-Spezifikation definierte «Bruchteil»-Einheit), inhaltsdimensioniert (auto, min-content, max-content) oder beliebige Kombinationen sein. grid-template-columns: 200px 1fr 1fr erzeugt eine 200px-Seitenleiste plus zwei gleiche flexible Spalten.
• Die fr-Einheit. Die Bruchteil-Einheit verteilt den verbleibenden Platz, nachdem fest dimensionierte Spuren zugewiesen wurden. 1fr 2fr 1fr gibt der mittleren Spalte den doppelten übrigen Platz der Seitenspalten. fr ist einzigartig für Grid (und das verwandte Äquivalent flex-basis: 0 1 fr in Flexbox ist nicht dasselbe). Sie löst, womit das Muster der «Prozentspalte» jahrzehntelang kämpfte: saubere Verteilung des restlichen Platzes.
• repeat() und minmax(). repeat(3, 1fr) definiert kompakt drei gleiche Spalten. minmax(200px, 1fr) beschränkt eine Spur auf einen Bereich. Die Killer-Kombination grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) erzeugt ein responsives Raster, das die Spaltenanzahl automatisch an den Container anpasst, ohne Media Queries. Diese eine Zeile ersetzte Tausende von Breakpoint-Definitionen in Produktions-CSS.
• grid-template-areas. Eine visuell angeordnete String-Syntax, die Bereiche des Rasters benennt. Kinder treten einem benannten Bereich mit grid-area: header bei. Das Ergebnis ist Layout-als-ASCII-Kunst: Jeder, der das CSS liest, kann das Raster aus dem Quellcode visualisieren. Besonders wirkungsvoll für das «Holy Grail»-Layout (Kopfzeile / Seitenleiste / Hauptbereich / Aside / Fußzeile), das CSS-Designer ein Jahrzehnt lang besiegte.
• gap (und column-gap, row-gap). Definiert den Abstand zwischen Spuren. gap: 16px gibt allen Zeilen und Spalten gleichmäßigen Abstand. Vor Grid erforderte dies brüchige padding+margin-Muster oder sorgfältig berechnete negative Margins. Dieselbe gap-Eigenschaft wurde später zu Flexbox hinzugefügt (universell unterstützt seit 2022) und gilt nun als kanonische Methode, um Zwischenelement-Abstände im modernen CSS zu handhaben.

Reale Grid-Muster

• Bildergalerien. Das Muster repeat(auto-fill, minmax(200px, 1fr)) ist das dominante CSS für Portfolio-Sites (Behance-Raster), Fotogalerien (Unsplash-Stil) und Produktkollektionen. Die automatische Anpassung der Spaltenanzahl ohne Media Queries war vor Grid praktisch unmöglich.
• Dashboards und Admin-Panels. Grafana, Datadog, Stripe Dashboard und die meisten modernen Admin-UIs verwenden benannte Raster-Bereiche, um Karten, Seitenleisten und Inhaltsregionen zu positionieren. Drag-and-Drop-Dashboard-Builder (DataDog, Looker, Tableau) übersetzen Benutzeraktionen in Mutationen von grid-template-areas-Strings.
• Layouts im Magazin-Stil. Redaktionelle Sites (The Guardian, NYT, Vox) verwenden Grid für asymmetrische Layouts mit überlappenden Elementen, großen Hero-Bildern, die mehrere Spalten überspannen, und Pull-Quote-Zitaten, die aus der Haupttextspalte ausbrechen. Die z-Achse von Grid (z-index mit expliziten Bereichen) handhabt die Schichtung natürlich.
• Produktkarten-Raster. Shopify-, Amazon-, Etsy-Storefronts. Das Muster ist so verbreitet, dass Tailwind CSS, Bootstrap und Bulma alle Grid-basierte Kartenkomponenten als Teil ihres Kern-Utility-Sets ausliefern. Das Kartenseitenverhältnis wird heute typischerweise mit der Eigenschaft aspect-ratio (Safari 15, Chrome 88, 2021) festgelegt.
• Das «Holy Grail»-Layout. Kopfzeile / linke Seitenleiste / Hauptinhalt / rechte Seitenleiste / Fußzeile. Dieses 5-Regionen-Layout war 15 Jahre lang das ungelöste Problem von CSS. Mit grid-template-areas und 8 Zeilen CSS wurde es 2017 trivial. Das Muster dominiert Dokumentationsseiten (Stripe Docs, MDN, Vercel Docs).
• Formular-Layouts. Zwei-Spalten-Formularlayouts mit Labels links und Eingaben rechts, Adressformulare mit Stadt/Bundesland/PLZ in einer Zeile, Multi-Step-Wizards. Grid lässt Labels und Eingaben sauber über Zeilen ausrichten, auch wenn die Inhaltsbreiten variieren. Das Muster ersetzte frühere Label-Breiten-Trick-Ansätze durch saubereres CSS.
• Modal- und Dialog-Positionierung. display: grid; place-items: center; auf einem Vollviewport-Overlay zentriert einen Dialog perfekt horizontal und vertikal mit einer einzigen Zeile und ersetzt jahrzehntelang verwendete position: absolute; top: 50%; transform: translateY(-50%);-Muster. place-items ist der kanonische 2024er Weg, beliebigen Inhalt zu zentrieren.
• Responsiv ohne Media Queries. Die Kombination von repeat(auto-fill, minmax(...)) mit gap erzeugt Layouts, die sich an die Container-Breite anpassen, ohne jede Media Query. Das ist das Fundament des modernen responsiven Designs: Layouts, die auf die Container-Größe statt auf die Viewport-Größe reagieren, in Vorwegnahme der Container Queries (jetzt auch ausgeliefert, 2023).

Standards und Meilensteine

• IE10 -ms-grid (2012). Microsoft lieferte die erste Grid-ähnliche Implementierung, entworfen von Phil Cupp bei Microsoft. Die Syntax unterschied sich von der letztendlichen W3C-Spezifikation, bewies aber das Konzept und beeinflusste spätere Designentscheidungen.
• CSS Grid Layout Module Level 1, W3C-Arbeitsentwurf (April 2011). Der erste öffentliche W3C-Entwurf. Mehrere Iterationen folgten; die Syntax entwickelte sich zwischen 2011 und der finalen Implementierung 2017 erheblich.
• Verfechterarbeit von Rachel Andrew und Jen Simmons (2014-2017). Andrews Buch Get Ready for CSS Grid Layout (Smashing Magazine, 2016) und Simmons' Konferenzvorträge als Mozilla-Developer-Advocate bauten die Community-Wissensbasis auf, die das Ausliefern durch Browser möglich machte. Beide werden in den W3C-Editor-Notizen der Spezifikation gewürdigt.
• Browser-Rennen, März 2017. In einem bemerkenswerten Zwei-Monats-Fenster lieferten Chrome 57 (9. März), Firefox 52 (7. März), Safari 10.1 (27. März) und Edge 16 (Oktober 2017) Grid ohne Präfix aus. Dieses Niveau synchronisierter Cross-Browser-Auslieferung war für ein Feature dieser Komplexität nahezu beispiellos.
• Candidate Recommendation (Dezember 2016). CSS Grid Level 1 wurde zur W3C Candidate Recommendation befördert, der letzten Stufe vor der W3C-Empfehlung. Die CR-Phase dauert typischerweise Jahre; Grid bewegte sich in dieser Phase schneller als die meisten CSS-Features.
• W3C-Empfehlung (August 2020). Grid Level 1 wurde als W3C-Empfehlung finalisiert. Dies ist technisch das «Launch»-Datum der Spezifikation, aber alle großen Browser hatten drei Jahre zuvor eine funktionierende Implementierung ausgeliefert.
• Subgrid (Level 2, 2019-2023). Subgrid lässt ein Raster-Item die Spur-Definitionen seines Elternteils erben und löst damit das Problem der «verschachtelten Raster-Ausrichtung». Firefox 71 (Dez. 2019), Safari 16 (Sept. 2022), Chrome 117 (Sept. 2023). Der langsame Chrome-Rollout spiegelte die Implementierungskomplexität wider.
• Masonry-Layout (vorgeschlagen, 2020-). Die CSS Working Group debattiert die Syntax seit 2020. Firefox lieferte es 2021 hinter Flag aus. Pinterest-artige fließende Layouts, die Items in Spalten packen, sind der Zielanwendungsfall. Das Chrome-Team (Apple-geführt) und das Mozilla-Team haben konkurrierende Syntaxen vorgeschlagen; Auflösung steht zum Stand 2024 noch aus.

Weitere häufig gestellte Fragen

Wann sollte ich Grid statt Flexbox verwenden?

Die Community-Kurzform: Flexbox ist für eine Dimension, Grid für zwei. Wenn Sie eine Reihe von Buttons anordnen oder Items in einer einzigen Richtung ausrichten, ist Flexbox einfacher. Wenn Sie ein Layout für eine ganze Seite mit Zeilen und Spalten entwerfen, die ausgerichtet sein müssen, ist Grid das richtige Werkzeug. Viele reale Layouts kombinieren beide: Grid für das Seitengerüst, Flexbox für die Ausrichtung auf Komponentenebene innerhalb jedes Raster-Bereichs. Moderne Frameworks (Tailwind, Bootstrap 5) übernehmen dieses Muster.

Funktioniert CSS Grid in älteren Browsern?

Alle Evergreen-Browser (Chrome, Firefox, Safari, Edge) unterstützen Grid seit März 2017. Internet Explorer 11 hat nur die frühe -ms-grid-Syntax (Teilmenge, präfixiert, viele Features fehlen). Für IE11-Unterstützung verwenden Sie @supports-Queries, um auf Flexbox oder Float-Layouts zurückzufallen. Zum Stand 2024 hat IE11 weniger als 0,5 % globale Nutzung, daher haben die meisten Teams das Fallback fallen gelassen. Caniuse.com berichtet über 97 % globale Unterstützung für präfixloses Grid.

Was ist der Unterschied zwischen grid-template-areas und grid-area?

grid-template-areas wird auf dem Raster-Container gesetzt und kartiert visuell die benannten Bereiche des Rasters (ein String pro Zeile). grid-area wird auf einem Raster-Item gesetzt, um es einem dieser benannten Bereiche zuzuweisen. Die beiden arbeiten zusammen: Der Container deklariert die «Karte», die Items deklarieren «ich bin Region X». Sie können grid-area auch direkt mit Linienzahlen (grid-area: 1 / 1 / 3 / 4) statt mit Namen verwenden, was für dynamische Layouts nützlich ist.

Was ist Subgrid und wann sollte ich es verwenden?

Subgrid lässt ein verschachteltes Raster die Spur-Definitionen seines Eltern-Rasters erben, anstatt eigene zu erstellen. Das löst das Problem, Items über verschachtelte Raster hinweg auszurichten, zum Beispiel eine Karte mit internem Layout, die mit umgebenden Karten ausgerichtet sein muss. Verwenden Sie grid-template-columns: subgrid auf dem verschachtelten Raster. Verfügbar in Firefox 71+ (Dez. 2019), Safari 16+ (Sept. 2022), Chrome 117+ (Sept. 2023). Fällt in nicht-unterstützenden Browsern auf ein reguläres verschachteltes Raster zurück.

Wie interagiert Grid mit Barrierefreiheit?

Die Grid-Platzierung ändert die DOM-Quellordnung nicht: Items erscheinen in der von Ihnen zugewiesenen visuellen Position, aber Screenreader und die Tab-Reihenfolge per Tastatur folgen der Quelle. WCAG 2.1 SC 1.3.2 Sinnvolle Reihenfolge verlangt, dass die Quellordnung Sinn ergibt, wenn die Stile entfernt werden. Die Implikation: Entwerfen Sie zuerst Ihre DOM-Quelle für eine logische Leseordnung, dann verwenden Sie Grid, um Items visuell zu platzieren. Wenn Sie Items mit grid-column: 3 / 5; grid-row: 2 drastisch umordnen, prüfen Sie mit einem Screenreader, ob die gesprochene Reihenfolge noch Sinn ergibt.