CSS-Rastergenerator
Entwerfen Sie CSS-Rasterlayouts visuell: Legen Sie Spalten, Zeilen und Lücken fest und geben Sie dann Bereichsnamen in Zellen ein, um Rastervorlagenbereiche zu erstellen – mit einer Live-Vorschau und kopierbarem CSS und HTML.
Ergebnis
Eine „grid-template-areas“-Deklaration ist einer der am besten lesbaren CSS-Teile, die es gibt, aber nur, wenn sie existiert. Um dorthin zu gelangen, müssen von Hand Strings in Anführungszeichen gezählt und Zeilenlängen abgeglichen werden, und eine nicht übereinstimmende Zelle zerstört stillschweigend das gesamte Layout. Dieser Generator verwandelt dies in eine direkte Manipulation: Legen Sie die Anzahl der Spalten und Zeilen fest, geben Sie einen Namen in eine beliebige Zelle des Live-Rasters ein, und übereinstimmende Namen werden automatisch zu einem benannten Bereich zusammengeführt.
Unter der Haube wird jede Zelle, die Sie leer lassen, zu einem Punkt in der generierten Zeichenfolge „grid-template-areas“, und jede Zelle, die Sie benennen, wird Teil des Rechtecks mit diesem Namen. CSS lässt nur zu, dass ein benannter Bereich einen sauberen rechteckigen Block einnimmt. Daher prüft das Tool dies während der Eingabe und teilt Ihnen genau mit, wann ein Name noch kein gültiges Rechteck bildet – anstatt stillschweigend CSS zu erzeugen, lehnt der Browser dies ab.
Column-gap und row-gap sind standardmäßig auf 8 Pixel eingestellt und werden bei Übereinstimmung zu einer einzelnen Lückenlinie kombiniert. Das Live-Vorschauraster spiegelt immer Ihre Grid-Template-Columns- und Grid-Template-Rows-Spuren wider, einschließlich Spalten mit festen Pixeln aus einer Voreinstellung wie den 200-Pixel-Seitenschienen des Holy Grail. Die kopierbare Ausgabe deckt beide Seiten ab: einen CSS-Block, der für Ihr Stylesheet bereit ist, und ein passendes HTML-Gerüst mit einem Rasterbereichs-Div pro benannter Region.
Grid und Flexbox lösen unterschiedliche Layoutprobleme, und der CSS-Flexbox-Generator auf dieser Site ist der bessere Ausgangspunkt für eindimensionale Layouts – eine einzelne Zeile oder Spalte flexibler Elemente wie eine Navigationsleiste oder ein Kartenstapel. Greifen Sie stattdessen zu diesem Rastergenerator, wenn Sie eine zweidimensionale Steuerung, explizite Zeilen und Spalten oder benannte Bereiche wie Kopfzeile/Navigation/Hauptzeile/Fußzeile benötigen. Die beiden Tools landen oft auf derselben Seite, dem Raster für die Seitenhülle und der Flexbox in ihren Teilen. Wie jedes Tool auf dieser Website läuft es vollständig in Ihrem Browser – kein Upload, kein Konto.