HandyTools Hub

CSS Grid-Generator

CSS-Grid-Layouts visuell gestalten und das CSS kopieren

Zellen sind in Lesereihenfolge nummeriert; Abstände aktualisieren sich live beim Ziehen.

Benannte Bereiche ersetzen die Spalten-/Zeilen-Regler durch ein Preset-Regionenlayout.

 
 
 
  
Anleitung


    

  1. Rastergröße festlegen — Ziehen Sie die Regler für Spalten und Zeilen, um jeweils zwischen 1 und 12 Spuren zu wählen; die nummerierten Vorschauzellen aktualisieren sich sofort.
    2. 

  2. Abstände anpassen — Steuern Sie mit den Reglern für column-gap und row-gap den Abstand zwischen den Spuren, ganz ohne margin-Regeln.
    3. 

  3. Benannte Bereiche aktivieren (optional) — Schalten Sie benannte Bereiche ein und wählen Sie ein Preset-Layout — Holy Grail, Sidebar oder Cards — um ein regionenbasiertes Raster als Textdiagramm zu sehen.
    4. 

  4. CSS kopieren — Übernehmen Sie den generierten .container-Block (plus eine .bereichsname-Regel pro Region bei aktiven benannten Bereichen) in Ihr Stylesheet.
    5. 



Funktionen


    

  • Volle Spuren-Kontrolle — 1–12 Spalten und Zeilen mit unabhängigen Reglern für column-gap und row-gap, synchronisiert zwischen Schieberegler und Zahlenfeld.
    • 

  • Live-Vorschau — Jede Änderung wird sofort in einem Demo-Raster mit nummerierten, farbcodierten Zellen dargestellt.
    • 

  • Presets für benannte Bereiche — Holy-Grail-, Sidebar- und Cards-Layouts per Klick, mit lesbarem grid-template-areas-Diagramm und passenden grid-area-Regeln.
    • 

  • Saubere Ausgabe — Abstände von null werden weggelassen und Spurzahlen nutzen die repeat()-Kurzform, sodass Sie nur kopieren, was zählt.
    • 

  • 100 % clientseitig — Alles läuft in Ihrem Browser; keine Daten verlassen Ihr Gerät.
    • 



Anwendungsfälle


    

  • Seitengerüste: Prototypen Sie eine Header/Sidebar/Main/Footer-Struktur mit dem Holy-Grail-Preset und ersetzen Sie die fr-Spuren später durch feste Seitenbreiten.
    • 

  • Karten-Galerien: Stellen Sie Spaltenzahl und Abstände für ein responsives Produkt-Raster ein und prüfen Sie das Umbruchverhalten, bevor Sie Media Queries schreiben.
    • 

  • CSS Grid lernen: Wechseln Sie zwischen einfachen Spuren und benannten Bereichen, um ein Gefühl für das Zusammenspiel von grid-template-columns, grid-template-rows und grid-template-areas zu entwickeln.
    • 



Verwandte Tools


Häufig gestellte Fragen
Was ist der Unterschied zwischen CSS Grid und Flexbox?
Flexbox ordnet Elemente entlang einer einzigen Achse an — einer Zeile oder einer Spalte — und eignet sich damit ideal für Navigationsleisten und eindimensionale Flüsse. CSS Grid arbeitet gleichzeitig in zwei Dimensionen: Zeilen und Spalten lassen sich gemeinsam definieren. Daher ist Grid die bessere Wahl für ganze Seitenlayouts und Karten-Galerien, bei denen Elemente horizontal wie vertikal ausgerichtet werden müssen.
Was bedeutet repeat(3, 1fr)?
Das ist die Kurzschreibweise für drei Spalten, die jeweils einen gleichen Anteil des verfügbaren Platzes einnehmen. Die Einheit fr verteilt den übrigen Platz proportional, sodass repeat(3, 1fr) gleichbedeutend mit 1fr 1fr 1fr ist — drei flexible, gleich breite Spuren, die gemeinsam wachsen und schrumpfen.
Wann sollte ich grid-template-areas verwenden?
Benannte Bereiche glänzen, wenn Ihr Layout erkennbare Regionen wie header, sidebar, main und footer hat. Statt Elemente über Liniennummern zu platzieren, zeichnen Sie das Layout als Textdiagramm in grid-template-areas und weisen jedem Element einen grid-area-Namen zu. Eine spätere Umstrukturierung bedeutet dann nur noch, das Diagramm anzupassen.
Was ist der Unterschied zwischen column-gap und row-gap?
column-gap bestimmt den Abstand zwischen den Grid-Spalten (vertikale Zwischenräume), row-gap den Abstand zwischen den Zeilen (horizontale Zwischenräume). Mit der gap-Kurzform lassen sich beide gleichzeitig setzen, separate Eigenschaften erlauben jedoch unabhängige Kontrolle — etwa enge Spaltenabstände bei großzügigen Zeilenabständen.
Ist das generierte CSS produktionsreif?
Ja. Die Ausgabe verwendet standardisierte, breit unterstützte Grid-Eigenschaften, die in jedem modernen Browser funktionieren. Standardwerte wie null Abstand werden weggelassen, damit das CSS sauber bleibt — fügen Sie es in Ihr Stylesheet ein und passen Sie die Spurgrößen bei Bedarf an (z. B. 1fr durch feste Pixelwerte ersetzen).