CSS Grid Generator online
Lege ein CSS-Grid an, indem du Zeilen, Spalten und Abstände wählst, platziere Elemente darauf und kopiere die grid-template-Regeln, die das Layout ergibt.
Browser-Tool
Dargestellt mit dem erzeugten CSS. Füge Elemente hinzu und platziere sie über die Rasterlinien.
Erzeugter Code
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}
.grid .kopfbereich {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.grid .seitenleiste {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.grid .inhalt {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
Über CSS-Grid-Generator
Grid ist das erste CSS-Layoutsystem, mit dem du Dinge in zwei Dimensionen zugleich platzierst, und das erste, das man wirklich schwer im Kopf behält. Die Spuren visuell aufzubauen und die Regeln zurückzulesen, ist der schnellste Weg, es zu verstehen. Kostenlos, ohne dich irgendwo zu registrieren. Das Layout wird online in dieser Seite berechnet und nie hochgeladen.
So nutzt du CSS-Grid-Generator
- Die Spuren festlegenWie viele Zeilen und Spalten, und wie jede bemessen ist: feste Breite, ein Bruchteil des verbleibenden Platzes oder passend zum Inhalt.
- Die Abstände festlegenGrid hat echte Zwischenräume, Abstände brauchen also keine Margins an Kindelementen mehr, die dann an den Rändern wieder aufgehoben werden müssen.
- Elemente über Zellen platzierenEin Element kann sich über mehrere Spuren erstrecken, und die erzeugte Regel gibt jede Anordnung wieder, die du baust.
- Das CSS kopierenDie Container-Regeln und die Platzierung jedes Elements, bereit zum Einfügen.
Was fr wirklich bedeutet
Eine fr-Einheit verteilt den Platz, der übrig bleibt, nachdem feste Spuren und Abstände abgezogen sind. 1fr 2fr teilt diesen Rest im Verhältnis ein Drittel zu zwei Dritteln, und deshalb verhält sich die Mischung aus 200px und 1fr vernünftig: Die feste Spur bekommt ihre 200 Pixel und der Bruchteil alles andere. Es ist kein Prozentwert, und genau dieser Unterschied sorgt dafür, dass es auch nach dem Hinzufügen eines Abstands funktioniert.
Wo sich minmax und auto-fit auszahlen
repeat(auto-fit, minmax(220px, 1fr)) ergibt ein responsives Grid ganz ohne Media Queries: so viele Spalten, wie bei mindestens 220 Pixeln passen, die sich den Rest gleichmäßig teilen. Diese eine Zeile ersetzt den Stapel von Breakpoints, den ein Float- oder Flex-Layout bräuchte.
Was das Tool nicht kann
- Grid steuert das Layout, nicht die Reihenfolge im Quelltext. Elemente nur optisch umzuordnen, ohne das Markup anzufassen, trennt das, was ein Screenreader vorliest, von dem, was Sehende sehen, und das ist ein Barrierefreiheitsproblem und kein cleverer Trick.
- Subgrid wird erst seit Kurzem unterstützt, prüf das also, bevor du dich darauf verlässt.
CSS-Grid-Generator: häufige Fragen
- Soll ich Grid oder Flexbox nehmen?
- Grid, wenn du in zwei Dimensionen anordnest und der Container das Layout bestimmen soll. Flexbox, wenn du eine einzelne Zeile oder Spalte hast und die Elemente sich selbst verteilen sollen. Die beiden ergänzen sich, und die meisten echten Seiten nutzen beide.
- Wie mache ich ein Grid ohne Media Queries responsiv?
- Mit repeat(auto-fit, minmax(<min>, 1fr)) für die Spalten. Der Browser setzt so viele Spuren, wie bei der Mindestbreite passen, verteilt den restlichen Platz auf sie und bricht fließend um statt an festen Breakpoints.
- Gibt der CSS Grid Generator Tailwind-Klassen aus?
- Nein, er erzeugt reines CSS: grid-template-columns, grid-template-rows und gap für den Container sowie grid-column und grid-row für jedes platzierte Element. Dieses CSS kannst du zusammen mit einer HTML-Demodatei kopieren oder herunterladen. Die Umwandlung in Tailwind-Utilities ist Handarbeit.
Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.
Ähnliche Tools
Die Tools, die man zusammen mit CSS-Grid-Generator am häufigsten braucht.
Du findest das passende Tool nicht?
Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.