CSS-Grid-Generator

Der CSS Grid Generator ist ein kostenloses Online-Tool zum visuellen Entwerfen von CSS-Grid-Layouts mit benannten Bereichen, Voreinstellungen und Live-Code-Ausgabe für CSS, Tailwind und HTML. Er läuft vollständig in Ihrem Browser, ohne Installation oder Anmeldung.

Klicken und ziehen Sie über die Zellen in der visuellen Vorschau. Benennen Sie zuerst den Bereich (oder lassen Sie ihn für einen automatischen Namen leer). Die CSS-Ausgabe enthält grid-template-areas und Klassenselektoren.

Jede Spalte oder Zeile kann fr, px, %, auto oder minmax(min, max) verwenden. minmax zeigt Zahleneingaben für Min/Max für responsive Tracks an.

Nach bestem Bemühen. Einheitliche fr-Tracks werden auf grid-cols-N abgebildet; gemischte Einheiten greifen auf beliebige Werte wie grid-cols-[200px_1fr_200px] zurück. Die CSS-Ausgabe ist die maßgebliche Quelle.

Ja, der CSS Grid Generator ist zu 100% kostenlos, ohne Registrierung, ohne versteckte Gebühren und ohne Nutzungslimits. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser und gewährleistet vollständige Privatsphäre.

Absolut. Der CSS Grid Generator verarbeitet alles clientseitig in Ihrem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Ihre Inhalte bleiben jederzeit privat auf Ihrem Gerät.

Ja, der CSS Grid Generator ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Sie können ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffnen Sie einfach den CSS Grid Generator in Ihrem Browser und legen Sie sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der CSS Grid Generator unterstützt eine breite Palette beliebter Formate und Sprachen. Die vollständige Liste der unterstützten Optionen finden Sie in der Tool-Oberfläche.

Der CSS Grid Generator funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwenden Sie die neueste Version Ihres bevorzugten Browsers.

Diese drei Einheiten bestimmen, wie jede Spur dimensioniert wird. Die Einheit fr steht für einen Anteil am übrigen Platz, nachdem feste Spuren platziert wurden — zwei Spalten mit je 1fr teilen sich also den restlichen Platz gleichmäßig auf und bleiben flexibel, wenn sich der Container in der Größe ändert. Ein px-Wert ist eine feste Pixelbreite, die sich nie ändert, ideal für Seitenleisten, Schienen oder Header, die ihre Größe behalten müssen. % wird relativ zur eigenen Breite oder Höhe des Containers gemessen, sodass eine 25%-Spalte unabhängig vom Inhalt immer ein Viertel einnimmt. Ein gängiges Muster mischt diese Einheiten, etwa eine feste 250px-Sidebar neben einer flexiblen 1fr-Hauptspalte. In diesem Generator bekommt jede Spalte und jede Zeile ihr eigenes Einheiten-Dropdown, sodass du fr, px, % und auto kombinieren und die Live-Vorschau sowie das CSS sofort beim Experimentieren aktualisiert sehen kannst.

Verwende minmax(), sobald eine Spur zwischen zwei Grenzwerten flexibel sein soll, statt eine feste Größe zu behalten. Es nimmt einen Minimal- und einen Maximalwert entgegen, sodass minmax(100px, 1fr) eine Spalte erlaubt, nicht kleiner als 100px zu schrumpfen, aber zu wachsen, um übrigen Platz zu füllen, wenn Raum vorhanden ist. Das ist das Rückgrat responsiver Layouts: Eine Seitenleiste kann auf schmalen Bildschirmen ein lesbares Minimum halten und sich auf breiten Bildschirmen ausdehnen, ganz ohne Media Query. Ein festes px ist nur dann besser, wenn eine Spur sich niemals bewegen darf, etwa eine präzise Icon-Schiene. In diesem Tool blendet die Auswahl von minmax im Einheiten-Dropdown einer Spur eigene Min- und Max-Zahlenfelder ein, sodass du beide Grenzwerte visuell einstellst und das generierte CSS den korrekten Wert minmax(min, max) schreibt. Probiere es an einer Spalte aus, um zu sehen, wie sich die Vorschau beim Ziehen der Browserbreite dehnt und begrenzt.

Beide positionieren Kindelemente in einem Grid, lesen sich aber sehr unterschiedlich. Die linienbasierte Platzierung nutzt nummerierte Grid-Linien, sodass ein Kindelement mit grid-column: 1 / 3 und grid-row: 2 / 4 gesetzt wird — präzise, aber du musst Linien zählen und bei jeder Änderung der Spuren neu zählen. grid-template-areas gibt Rechtecken stattdessen menschliche Namen wie header, sidebar und main und platziert ein Kindelement dann mit einem einzigen grid-area: header. Die Struktur wird auf einen Blick verständlich und lässt sich weit leichter umsortieren, da du die benannte Karte bearbeitest statt mit Linienzahlen zu jonglieren. Benannte Bereiche halten das Markup zudem für Teammitglieder selbsterklärend. Dieser Generator setzt auf Bereiche: Namen eintippen, über Zellen ziehen, um die Region zu malen — und er erzeugt den grid-template-areas-Block plus einen Klassen-Selektor für jeden Bereich, während du Start- und End-Werte von Zeile und Spalte bei Bedarf trotzdem numerisch feinjustieren kannst.

Sie klingen ähnlich, wirken aber auf unterschiedliche Dinge. justify-items richtet den Inhalt innerhalb jeder Grid-Zelle entlang der Zeilenachse (inline) aus — der Wert center zentriert also jedes Element innerhalb seiner eigenen Zelle, während die Zellen selbst an Ort und Stelle bleiben. justify-content richtet die gesamte Gruppe der Spuren innerhalb des Grid-Containers aus, wenn die Spalten nicht die gesamte verfügbare Breite ausfüllen — hier kommen Verteilungswerte wie space-between, space-around und space-evenly ins Spiel, um die Spalten auseinanderzuziehen. Dasselbe Paar existiert auf der Blockachse als align-items gegenüber align-content. Kurz gesagt: Die -items-Eigenschaften bewegen Dinge innerhalb von Zellen, die -content-Eigenschaften bewegen die Spuren innerhalb des Containers. Dieser Generator bietet alle vier Eigenschaften als Dropdowns plus unabhängige Schieberegler für Zeilen- und Spalten-Gap, sodass du jede einzelne umschalten und sofort sehen kannst, wie sich das Layout verändert, bevor du das resultierende CSS kopierst.

Die schnelle Faustregel betrifft die Dimensionen: Flexbox ist eindimensional und ordnet Elemente entlang einer einzelnen Zeile oder Spalte an, während CSS Grid zweidimensional ist und Zeilen und Spalten gleichzeitig steuert. Greife zu Flexbox, wenn du eine Reihe von Elementen hast, die entlang einer Achse umbrechen oder verteilt werden sollen, etwa eine Navigationsleiste, eine Button-Gruppe oder Tags. Greife zu Grid, wenn du eine echte Seiten- oder Komponentenstruktur brauchst, bei der Elemente über beide Achsen hinweg ausgerichtet werden müssen, wie ein Dashboard mit Header, Sidebar, Hauptbereich und Footer. Sie sind keine Rivalen und werden oft verschachtelt: Ein Grid definiert das übergeordnete Seitenskelett, und Flexbox ordnet die Inhalte innerhalb einer einzelnen Zelle an. Da die Grid-Syntax dicht und leicht subtil falsch anzuwenden ist, lässt dich dieser Generator die zweidimensionale Struktur visuell aufbauen, benannte Bereiche malen und sauberes CSS, Tailwind oder HTML direkt in dein Projekt kopieren.