CSS-Grid-Layout-Generator - Schritt für Schritt
Der CSS-Grid-Layout-Generator erstellt in drei Schritten einen einfügbaren display: grid-CSS-Block: Spalten- und Zeilenanzahl festlegen, Abstände festlegen, Ergebnis kopieren. Es wird nichts hochgeladen und nichts installiert.
Schritt 1 - Spalten und Zeilen festlegen
Öffnen Sie den CSS-Grid-Layout-Generator. Ziehen Sie den Regler Columns (1 bis 12) und den Regler Rows (1 bis 6), um dem gewünschten Layout zu entsprechen - das Vorschauraster rechts zeichnet die Zellen sofort neu.
Schritt 2 - Abstände festlegen
Ziehen Sie die Regler Column gap und Row gap (jeweils 0px bis 50px), um den Abstand zwischen den Zellen zu steuern. Das Vorschauraster und der darunter erzeugte CSS-Text aktualisieren sich live mit den exakten Pixelwerten.
Schritt 3 - Ergebnis kopieren
Klicken Sie auf "Copy CSS", um den erzeugten Block in die Zwischenablage zu kopieren. Falls der Browser den Zugriff auf die Zwischenablage blockiert, fordert eine Statusmeldung Sie auf, den Text manuell auszuwählen und zu kopieren. Die gesamte Seite läuft im Browser, daher wird kein Reglerwert an einen Server gesendet.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.