Mit dem CSS Grid Generator können Sie CSS Grid-Layouts visuell erstellen, ohne Code schreiben zu müssen. Verwenden Sie die Schieberegler, um die Anzahl der Spalten und Zeilen festzulegen, den Abstand zwischen den Zellen anzupassen und sofort den vollständigen CSS-Code zu kopieren, um ihn in Ihr Projekt einzufügen.
CSS Grid ist das leistungsstärkste Layoutsystem in CSS. Es verarbeitet sowohl Zeilen als auch Spalten gleichzeitig und eignet sich daher perfekt für komplexe Seitenstrukturen, Kartenraster und responsive Designs.
Frequently Asked Questions
Q: Was ist der Unterschied zwischen CSS Grid und Flexbox?
Was ist der Unterschied zwischen CSS Grid und Flexbox? Grid ist für zweidimensionale Layouts (Zeilen UND Spalten) konzipiert. Flexbox ist für eindimensionale Layouts (Zeile ODER Spalte) konzipiert. Verwenden Sie Raster für die Seitenstruktur und Flexbox für die Komponentenausrichtung.
Q: Wie mache ich mein Raster responsiv?
Wie mache ich mein Raster responsiv? Verwenden Sie das generierte CSS als Ausgangspunkt und fügen Sie @media-Abfragen hinzu, um die Anzahl der Spalten an verschiedenen Haltepunkten zu ändern.
Q: Kann ich CSS Grid in der Produktion verwenden?
Kann ich CSS Grid in der Produktion verwenden? Ja. CSS Grid wird seit 2017 in allen modernen Browsern unterstützt. Es bietet 96 % globale Browserunterstützung.
Q: Was bedeutet 1fr?
Was bedeutet 1fr? fr steht für Bruch. 1fr bedeutet einen Bruchteil des verfügbaren Platzes. Wenn Sie drei Spalten haben, die jeweils auf 1fr eingestellt sind, teilen sie den Raum gleichmäßig auf.
Q: Kann ich Gitter in Gittern verschachteln?
Kann ich Gitter in Gittern verschachteln? Ja, Grid-Elemente können selbst zu Grid-Containern werden. Erstellen Sie ein Hauptseitenraster und verwenden Sie dann verschachtelte Raster für einzelne Abschnitte wie eine Seitenleiste oder einen Inhaltsbereich.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.