CSS-Grid-Builder
CSS Grid Builder
Legt ein Raster visuell mit benannten Bereichen an und gibt das grid-template-CSS aus.
Malt benannte Bereiche auf ein Grid, indem Sie Zellen anklicken, prüft sie gegen die Rechteckregel der Spezifikation und gibt `grid-template-areas` aus – oder Liniennummern, wenn Sie das bevorzugen. Die Prüfung zählt, weil eine ungültige Bereichsliste stillschweigend verworfen wird, ohne Fehler irgendwo.
Raster
In ein Größenfeld passen 1fr·240px·auto·minmax(200px, 1fr).
Klicken Sie eine Zelle an, um ihr den Bereichsnamen von unten zu geben. Klicken Sie erst die eine und dann die andere Zelle an, und das Rechteck dazwischen wird als ein Bereich gefüllt. Ein erneuter Klick auf eine Zelle desselben Namens leert sie.
CSS
Vorschau
Eine Regel müssen Sie sich merken
Ein benannter Bereich muss ein Rechteck sein (CSS Grid Level 2 §7.3.1). Bauen Sie ein L, wird die ganze Deklaration grid-template-areas verworfen, ganz ohne Fehlermeldung — deshalb sagt dieses Werkzeug es Ihnen, bevor es das CSS schreibt. Drei oder mehr gleiche Tracks hintereinander werden mit repeat() geschrieben.
Für ein eindimensionales Layout ist die Flexbox-Spielwiese einfacher.
So funktioniert es
Beginnen Sie mit einem Layout
Header-Sidebar-Main-Footer, eine Kartenreihe, ein Dashboard, ein zentrierter Artikel. Oder bauen Sie Ihr eigenes aus einem leeren Grid.
Benennen Sie einen Bereich und klicken Sie die Zellen an
Tippen Sie den Namen, dann klicken Sie. Klicken Sie eine Zelle und dann eine andere an, um das Rechteck dazwischen zu füllen; klicken Sie eine Zelle desselben Namens erneut an, um sie zu leeren.
Setzen Sie die Track-Größen
Die Felder oben und links nehmen `1fr`, `240px`, `auto` oder `minmax(200px, 1fr)`. Drei oder mehr identische Tracks werden mit `repeat()` geschrieben.
Häufige Fragen
Warum funktioniert mein L-förmiger Bereich nicht?
Weil ein benannter Bereich ein Rechteck sein muss – CSS Grid Level 2 §7.3.1. Ist er keines, ist die ganze `grid-template-areas`-Deklaration ungültig, und der Browser verwirft sie ohne jeden Fehler. Dieses Werkzeug sagt es Ihnen, bevor es das CSS schreibt, und das ist die einzige Warnung, die Sie bekommen werden.
Benannte Bereiche oder Liniennummern?
Bereiche lesen sich besser und überleben das Einfügen eines Tracks. Liniennummern sind die einzige Option, wenn ein Element einen Track überspannt, den es nicht in jedem Breakpoint gibt, oder wenn das Grid generiert wird. Der Umschalter schreibt beides.
Wie lasse ich eine Zelle leer?
Geben Sie ihr keinen Namen. Sie wird als `.` in die Vorlage geschrieben, das Null-Zellen-Token der Spezifikation – ein Punkt pro leerer Zelle, und eine Folge davon muss trotzdem jeden benannten Bereich rechteckig lassen.
Warum schrumpft `fr` nicht unter den Inhalt?
Weil `1fr` `minmax(auto, 1fr)` bedeutet, und dieses `auto`-Minimum ist die Inhaltsgröße. Verwenden Sie `minmax(0, 1fr)`, wenn Sie einen Track wollen, der wirklich schmaler werden kann als das, was darin ist – die klassische Lösung für ein Grid-Kind, das sich weigert zu schrumpfen.
Eingabe aus
Flexbox-Spielwiese
Flexbox Playground
Schaltet jede Flex-Eigenschaft an einem Live-Beispiel um und zeigt das CSS und was jede Eigenschaft geändert hat.
Fluid-Size-Rechner
Fluid Size Calculator
Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Fluid-Size-Rechner
Fluid Size Calculator
Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Flexbox-Spielwiese
Flexbox Playground
Schaltet jede Flex-Eigenschaft an einem Live-Beispiel um und zeigt das CSS und was jede Eigenschaft geändert hat.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.