10 nützliche CSS-Layout-Generatoren (Grid & Flexbox)

Falls Sie sich jemals gefragt haben, warum bestimmte CSS-Frameworks so beliebt sind – das liegt vor allem daran, dass Frameworks den Prozess der Erstellung einer Layoutstruktur vereinfachen. Dieses Konzept erstreckt sich auch auf Bibliotheken und UI-Kits, insbesondere für beliebte Frameworks wie Tailwind CSS.

Zu lernen, wie man ein Seitenlayout mit CSS strukturiert, ist gar nicht so schlecht. Sowohl Grid als auch Flexbox sind relativ einfach zu verstehen, sobald Sie ihre Verwendung in realen Projekten geübt haben. Der Zugriff auf intuitive Layout-Generatoren ist jedoch ein Geschenk des Himmels. Sie können nicht nur die Erstellung einer komplexen Layoutstruktur vereinfachen, sondern auch einiges an Entwicklungszeit einsparen.

Layout-Generatoren für Grid & Flexbox

Anstatt zwei separate Artikel zum selben Thema zu verfassen, werde ich sowohl Grid- als auch Flexbox-Generatoren in einem einzigen Beitrag kombinieren. Tatsächlich bieten einige der Ressourcen in dieser Liste die Möglichkeit, Layouts für das eine oder andere zu generieren. Und ganz am Ende werde ich auch ein paar „eigenständige“ Ressourcen hinzufügen. Dabei handelt es sich nicht unbedingt um Generatoren , sondern um vordefinierte Layouts, die Sie kopieren und in ein vorhandenes oder ein neues Projekt einfügen können, an dem Sie gerade arbeiten.

Ich habe einen Link zur Website jeder Ressource und auch zur GitHub-Seite hinzugefügt. In einigen Fällen ist der Quellcode des Projekts nicht veröffentlicht, daher habe ich stattdessen einen Link zur Autorenseite hinzugefügt.

CSS-Layout-Generator

Dieser Layout-Generator von Brad Woods ist mit Sicherheit eine der beliebtesten Optionen für CSS-Entwickler, da er Optionen sowohl für Grid als auch für Flexbox bietet. Auf der Zielseite können Sie vorgefertigte Vorlagen für jedes System auswählen und dann die bereitgestellten Tools verwenden, um Ihr ausgewähltes Layout weiter anzupassen. Es dauert eine Weile zu lernen, aber es lohnt sich auf jeden Fall.

Sobald Sie eine Vorlage ausgewählt haben, erhalten Sie Zugriff auf einen visuellen Editor, in dem Sie Dinge wie die Zeilen- und Spaltenanzahl ändern können. Sie können auch bestimmte Lücken zwischen den einzelnen Zeilen/Spalten anwenden und den Stil weiter verbessern, indem Sie benutzerdefinierte Ränder hinzufügen. Während Sie dies tun, ändern sich die Code-Snippets in der rechten Seitenleiste in Echtzeit. Und wenn Sie fertig sind, können Sie den Code kopieren.

CSS-Grid-Layout-Generator

Ich gebe zu, dass sich dieses Tool auf den ersten Blick ein wenig einschüchternd anfühlen kann, was meiner Meinung nach der Grund ist, warum der Autor ein Video-Tutorial dafür erstellt hat. Es lohnt sich jedoch, dieses Tool zu beherrschen, da es immens leistungsstarke Funktionen zum Erstellen von mehrschichtigen Layouts bietet.

Abgesehen davon, dass Sie neue Grid-Elemente hinzufügen können, können Sie die Einstellungen jedes Elements anpassen, einschließlich globaler Container-Optionen für die Grundlage des Layouts. Darüber hinaus ist es möglich, Elemente zu überlagern und Layouts zu erstellen, die 3D-Effekte replizieren.

Layoutit-Raster

Es gibt eine Reihe von Gründen, warum ich den Layoutit-Generator liebe. Erstens haben Sie viel Freiheit beim schnellen Hinzufügen von grid-template-columns und grid-template-rows . Und jede dieser Spalten und Zeilen kann mit Ihren bevorzugten Maßeinheiten geändert werden.

Indem Sie auf jedes Element in der Layout-Vorschau klicken, können Sie Bereichsnamen zuweisen – so können Sie Ihr Layout basierend auf dem Inhalt strukturieren, der darin enthalten sein wird. Und nicht zuletzt können Sie Ihre Layouts mit einem einzigen Klick direkt in CodePen oder CodeSandbox exportieren.

CSS-Flex-Container

Dieser einfache und intuitive Flexbox-Generator von Dillion Megida ist auf jeden Fall ein Lesezeichen wert, auch wenn Sie nicht so oft mit Flex-Layouts arbeiten. Es funktioniert, indem Sie neue div-Elemente hinzufügen oder entfernen und dann auch eine benutzerdefinierte Höhe/Breite für sie angeben können. Das Einzige, was Sie manuell tun müssen, ist die Höhe/Breite für einzelne div-Elemente anzupassen.

Es sieht nicht so aus, als wäre das Tool dazu in der Lage, da es die angegebenen Abmessungen für die Divs auf einmal festlegt.

Darüber hinaus können Sie globale Werte auf justify-content und flex-direction anwenden. Wenn Sie auf die Schaltfläche Code generieren klicken, hat Dillion eine vollständige HTML-Vorlage vorgefertigt, sodass Sie sofort mit der Arbeit mit dem Layout beginnen können. Ich fand das eine nette Geste.

Grässlich

Ich denke, wenn Sie unerfahren in der Arbeit mit Grid sind – das Griddy-Tool wird Sie sehr schnell auf den neuesten Stand bringen. Die übersichtliche Benutzeroberfläche in Kombination mit leicht verständlichen Funktionen bietet ein optisch ansprechendes Lernerlebnis. Sie können Zeilen hinzufügen, sie entfernen oder Ihr Layout in Spalten gliedern und dann benutzerdefinierte Einheiten angeben, um zu sehen, wie es sich in Echtzeit ändert.

Zusätzliche Funktionen umfassen die Möglichkeit, Abstände zwischen Zeilen und Spalten zu ändern, aber auch Elemente auszurichten und sie mit Dehnungs-, Zentrierungs-, Start- und Endeigenschaften auszurichten.

CSS-Grid-Generator

Ich denke, es ist fair zu sagen, dass Sarah Drasner ein bekannter Name in der Webentwickler-Community ist.

Und um etwas zurückzugeben – sie hat das CSS-Grid-Generator-Tool zusammengestellt. Es ist wohl eines der beliebtesten Tools für seinen Zweck. Die Funktionsweise ist relativ einfach. Sie haben die Möglichkeit, Zeilen und Spalten festzulegen und diesen dann individuelle Einheitennummern zuzuweisen.

In ihren eigenen Worten sagt Sarah, dass es kein vollständiges Tool ist, aber sicherlich genug, um Junior-Entwicklern ein besseres Verständnis der komplizierten Werte zu vermitteln, die in Grid-Layouts angegeben sind.

Flexy-Boxen

Meine Lieblingsfunktion von Flexy Boxes ist die Möglichkeit, benutzerdefinierte Einstellungen auf jedes Div einzeln anzuwenden.

Es funktioniert wie erwartet. Sie können div-Elemente hinzufügen/entfernen und sie dann so strukturieren, dass ein einzigartiges Layout entsteht. Sie erhalten auch alle bekannten Tools zum Verwalten der allgemeinen Containereinstellungen. Dazu gehört die Möglichkeit, flex-direction zu ändern oder einen benutzerdefinierten Wert für align-items anzugeben. Und wenn Sie fertig sind, ist das Code-Snippet zum Export bereit.

Flexbox-Spielplatz

Wenn Sie Flexbox lernen möchten, ist dies eine Ressource für Sie. Ich meine, Sie können das endgültige Layout exportieren, wenn Sie möchten, aber es ist mehr als ein Generator, sondern ein Lernwerkzeug. Das Ziel besteht darin, Ihnen eine klare Vorstellung davon zu vermitteln, was passiert, wenn Elemente zu einer Flex-Layout-Grundlage hinzugefügt werden. Und auch, um zu zeigen, was passiert, wenn Sie einzelne Elemente (Zeilen) innerhalb dieser Grundlage bearbeiten.

Flex-Layout-Attribut

Flex Layout Attribute (FLA) funktioniert ein bisschen wie ein Framework. Es basiert auf zwei einzigartigen Kurzschrifteigenschaften: layout und self . Mit diesen beiden Eigenschaften können Sie praktisch auf jeder Seite, auf der Sie auf die FLA-Bibliothek verweisen, ein benutzerdefiniertes Layout erstellen und implementieren.

Und um Verwirrung zu vermeiden, können Sie den Generator (Link unten) verwenden, um das Layout an Ihre Anforderungen anzupassen. Sobald Sie fertig sind, erhalten Sie ein vorgerendertes Snippet, das zum Import bereit ist.

Flexbox-Muster

Wie ich am Anfang dieses Artikels sagte – ich füge auch ein paar „statische“ Ressourcen hinzu, und wir werden mit Flexbox Patterns beginnen . Diese kostenlose Ressource von CJ Cenizal konzentriert sich auf Benutzeroberflächenmuster, die Sie kopieren und in eine vorhandene Layoutstruktur einfügen können.

Da wir uns bereits so viele großartige Generatoren angesehen haben, wird die Kombination Ihrer generierten Layouts mit diesen Mustern zu mühelosen Designergebnissen führen. Was ich jedoch am meisten an diesem Projekt liebe, ist, dass CJ viele Kommentare zu jedem Muster hinzugefügt hat.

Daher können Sie auch Flexbox-Muster verwenden, um mehr über die Funktionsweise des Flexbox-Layouts zu erfahren.

1-zeilige Layouts

Una ist eine absolute Legende im CSS-Bereich. Und für das 1-Zeilen-Layout- Projekt; Sie hat eine Reihe von CSS-Layoutstrukturen zusammengestellt, die Sie in jedes bereits bestehende Projekt implementieren können.

Diese Layouts implementieren insbesondere einige neuere CSS-Funktionen wie clamp(), zeigen aber auch praktische Flex- und Grid-Layouts „Heiliger Gral“.

Und wenn Sie mehr erfahren möchten, sehen Sie sich dieses kommentierte Video an, das ausführlich auf jedes Layout eingeht:

Die folgenden Links führen zur eigentlichen Website, auf der Sie jedes Snippet abrufen können, aber auch zu Unas persönlicher GitHub-Seite. Sie hat viele wunderbare Projekte am Laufen, also einen Besuch wert!

CSS-Layout

CSS Layout ist ein von der Community betriebenes Projekt, das die beliebtesten Arten von UI-Mustern abdeckt, die Sie in modernen Webdesigns finden können. Die in dieser Ressource gefundenen Muster sind alle in reinem CSS geschrieben und hängen nicht von externen Bibliotheken oder Skripten ab.

Wenn Sie auf eines der Muster klicken, erhalten Sie ein fertiges Code-Snippet. Das Schöne am CSS-Layout ist, dass Sie so viele verschiedene Elemente erhalten, dass es eigentlich super einfach ist, schnell ein einzigartiges Design zu mischen und anzupassen. Und natürlich, um mehr über CSS-Eigenschaften und -Funktionen zu erfahren.

Der beste Weg zu lernen ist zu üben

Es ist ziemlich einfach, sich mit CSS überfordert zu fühlen. Kleinste Fehler können dazu führen, dass Ihr Layout nicht oder nur auf einem bestimmten Gerät funktioniert. Letztendlich ist Übung also unerlässlich, um das Beste aus CSS herauszuholen.

Und mit Hilfe dieser Layout-Generatoren und verschiedener Muster sollte es ausreichen, um Ihnen den Einstieg zu erleichtern. Meiner Erfahrung nach macht es sogar mehr Spaß, mit externen Bibliotheken und Frameworks zu arbeiten, wenn man lernt, rohes CSS zu schreiben.

Ich werde auch versuchen, diese Sammlung so oft wie möglich zu aktualisieren. Jetzt, da Features wie Container Queries, Cascade Layers und Variables in den Mainstream einsickern, denke ich, dass wir im kommenden Jahr oder so viele Änderungen an diesen Tools sehen werden.