CSS-Grid-Layouts mit Spalten-/Zeilenvorlagen und Abstandssteuerung generieren
Ein CSS-Grid-Generator lässt Sie ein Rasterlayout visuell bauen — Spalten und Zeilen und die Abstände dazwischen definieren — und dann das CSS kopieren, das es erzeugt. CSS Grid ist das mächtigste Layoutsystem in CSS, für zweidimensionale Layouts gemacht, in denen Sie Zeilen und Spalten zugleich steuern, aber seine Syntax für Templates, Fraktionen und Abstände ist dicht und allein aus dem Code schwer vorstellbar. Spalten anzupassen und das Raster sich umordnen zu sehen ist weit schneller, als Template-Zeichenketten blind zu bearbeiten.
Was Grid erschließt, sind die fr-Einheit und die grid-template-Eigenschaften: fr teilt den verfügbaren Raum in flexible Anteile, ein Template „1fr 2fr" gibt also zwei Spalten, deren zweite doppelt so breit ist, und das Layout fließt responsiv ohne feste Pixelbreiten. Kombiniert mit gap für konsistente Abstände bewältigt das Seitenlayouts, Bildergalerien, Dashboards und Kartenraster, die mit älteren Techniken umständlich sind. Dieses Tool erzeugt standardbasiertes CSS im Browser, bereit zum Einfügen, sodass Sie ein Raster nach Augenmaß statt durch Ausprobieren anlegen.
fr steht für „Fraktion" und teilt den verfügbaren Raum in flexible Anteile. Ein Template „1fr 1fr 1fr" macht drei gleiche Spalten, „1fr 2fr" macht die zweite doppelt so breit wie die erste. Anders als feste Pixel flexen fr-Spalten, um den Container responsiv zu füllen.
Grid ist für zweidimensionale Layouts gebaut — Zeilen und Spalten zugleich — wie eine ganze Seitenstruktur oder ein Kartenraster. Flexbox glänzt in einer Richtung, einer einzelnen Zeile oder Spalte. Viele Designs nutzen Grid fürs Gesamtlayout und Flexbox in einzelnen Komponenten.
gap setzt konsistente Abstände zwischen Rasterzeilen und -spalten, ohne den Elementen selbst Ränder hinzuzufügen. Es gilt nur zwischen Zellen, nicht um die Außenkante, was gleichmäßige, vorhersehbare Abstände weit leichter macht als das Verwalten von Rändern an jedem Element.
Ja. Über die Rasterdefinition hinaus kann man einzelnen Elementen sagen, mehrere Spalten oder Zeilen zu überspannen, sodass eine Feature-Karte sich über das Layout strecken kann, während andere in einzelnen Zellen bleiben. Der Generator fokussiert die Rasterdefinition; das Überspannen wird pro Element mit grid-column und grid-row gesetzt.
Box-Shadow-Generator · Border-Radius-Generator · Flexbox-Generator · Text-Shadow-Generator · CSS-Animations-Generator · CSS-Filter-Generator