# CSS-Masonry-Layout-Generator Erzeugt reine CSS-Masonry-Layouts mit Breakpoints, Abstaenden und optionalen Skip-Selektoren > Kanonische Seite: https://elysiatools.com/de/tools/css-masonry-layout-generator - **Kategorie:** Development - **Schlagwörter:** css, masonry, layout, grid ## Überblick Geben Sie Spaltenzahl, Containerbreite, Abstand und Breakpoints ein und waehlen Sie dann zwischen CSS Columns und Flexbox. Das Tool liefert direkt kopierbares HTML und CSS mit Kommentaren. Enthalten sind: - HTML-Grundgeruest - kommentiertes CSS - Zusammenfassung zu Breakpoints und Skip-Selektoren ## Eingaben - **Spalten** (number) - **Container-Breite** (text) - **Abstand** (text) - **Layout-Engine** (select) - **Responsive Breakpoints** (textarea): 640:2 960:3 1280:4 - **Elemente ueberspringen** (textarea): .masonry__item--featured .masonry__hero ## Wann verwenden - Erstellung von responsiven Bildergalerien im Pinterest-Stil ohne den Einsatz von JavaScript-Bibliotheken. - Aufbau von Blog- oder Portfolio-Übersichten mit unterschiedlich hohen Inhaltskarten (Cards). - Schnelles Prototyping von komplexen Grid-Strukturen mit spezifischen Breakpoints und hervorgehobenen Elementen. ## Funktionsweise - Legen Sie die maximale Spaltenanzahl, die Container-Breite und den gewünschten Abstand (Gap) zwischen den Elementen fest. - Wählen Sie die Layout-Engine (CSS Columns für klassisches Masonry oder Flexbox) und definieren Sie optionale Breakpoints für mobile Geräte. - Tragen Sie bei Bedarf CSS-Klassen ein, die das Standard-Layout überspringen sollen (z. B. für vollbreite Banner). - Kopieren Sie das generierte HTML-Grundgerüst und den kommentierten CSS-Code direkt in Ihr Projekt. ## Anwendungsfälle - Fotografen-Portfolios mit Bildern in unterschiedlichen Hoch- und Querformaten. - E-Commerce-Produktübersichten, bei denen Aktionsbanner den Produktfluss unterbrechen sollen. - Nachrichten-Websites oder Blogs mit dynamischen Artikel-Karten im Dashboard-Stil. ## Häufig gestellte Fragen ### Benötigt dieses Masonry-Layout JavaScript? Nein, das Tool generiert reines CSS und HTML. Es nutzt moderne CSS-Eigenschaften wie Columns oder Flexbox, um den Wasserfall-Effekt ohne Skripte zu erzielen. ### Was ist der Unterschied zwischen CSS Columns und Flexbox in diesem Tool? CSS Columns ordnet Elemente von oben nach unten in Spalten an, was ideal für klassische Masonry-Layouts ist. Flexbox bricht Elemente zeilenweise um und bietet oft mehr Kontrolle über die Breite einzelner Karten. ### Wie formatiere ich die responsiven Breakpoints? Geben Sie pro Zeile einen Breakpoint und die gewünschte Spaltenanzahl im Format 'Pixel:Spalten' ein, zum Beispiel '640:2' für zwei Spalten ab 640px Breite. ### Wofür ist die Funktion 'Elemente überspringen' gedacht? Damit können Sie bestimmte CSS-Klassen (wie .featured) definieren, die den normalen Spaltenfluss unterbrechen und beispielsweise die volle Breite des Containers einnehmen sollen. ### Kann ich relative Einheiten für Breite und Abstand verwenden? Ja, Sie können beliebige gültige CSS-Werte wie %, rem, em oder vw für die Container-Breite und den Abstand (Gap) eintragen. ## Ähnliche Tools - [Tailwind-Farbpaletten-Sync](https://elysiatools.com/de/tools/tailwind-color-palette-sync): Gib HEX ein, wähle Namensschema (Skala 50–950 / Einzelname / Verschachtelung) und generiere das theme.extend.colors-Fragment für tailwind.config.ts mit WCAG AA/AAA-Leveln. Dark Mode optional. - [cURL-zu-Go (net/http) Konverter](https://elysiatools.com/de/tools/curl-to-go): Konvertiert einen cURL-Befehl in ein Go net/http-Code-Snippet mit http.NewRequest, Headern und Body - [cURL-zu-JavaScript (axios) Konverter](https://elysiatools.com/de/tools/curl-to-js-axios): Konvertiert einen cURL-Befehl in ein JavaScript axios-Code-Snippet mit Konfigurationsobjekt, Headern und Daten - [cURL-zu-JavaScript (fetch) Konverter](https://elysiatools.com/de/tools/curl-to-js-fetch): Konvertiert einen cURL-Befehl in ein JavaScript fetch()-Code-Snippet mit Headern, Body und Methode - [cURL-zu-PHP (cURL) Konverter](https://elysiatools.com/de/tools/curl-to-php): Konvertiert einen cURL-Befehl in ein PHP cURL-Code-Snippet mit curl_setopt, Headern und POST-Feldern - [cURL-zu-Python (requests) Konverter](https://elysiatools.com/de/tools/curl-to-python): Konvertiert einen cURL-Befehl in ein Python requests-Code-Snippet mit Headern, Daten und Methode - [URL-Verkürzer](https://elysiatools.com/de/tools/url-shortener): Generiert kurze URLs mit echten URL-Verkürzungsdiensten (is.gd und v.gd) - [API-Vertrags-Stresstester](https://elysiatools.com/de/tools/api-contract-stress-tester): Erzeugt Grenzwerttests aus einem OpenAPI-3.x-Dokument und sendet sie optional an ein echtes Backend, um Vertragsabweichungen zu finden. ## Beispiele - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [CSS-Beispiele](https://elysiatools.com/de/samples/css-viewer-samples): Beispieldateien fuer den Browser-basierten CSS-Viewer - [Milligram CSS Framework Beispiele](https://elysiatools.com/de/samples/milligram): Milligram CSS-Framework-Beispiele einschließlich Typografie, Formulare, Grids und Komponenten - [Tailwind CSS Samples](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations ## Verwandte Inhalte - [CSS-Arbeit, Layout und Kaskade](https://elysiatools.com/de/hubs/css-authoring-layout-and-cascade-workflows): Erstellen und prüfen Sie CSS mit Formatierung, Selektor-Diagnose, responsiven Snippets, visuellen Effekten und Render-Checks.