CSS-Masonry-Layout-Generator

Erzeugt reine CSS-Masonry-Layouts mit Breakpoints, Abstaenden und optionalen Skip-Selektoren

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

Beispielergebnisse

1 Beispiele

Ein responsives 4-Spalten-Masonry erzeugen

Liefert kopierbares HTML und CSS mit vollbreitem Featured-Element.

HTML
```html
<section class="masonry">...
```

CSS
```css
.masonry { ... }
```
Eingabeparameter anzeigen
{ "columns": 4, "containerWidth": "1200px", "gap": "20px", "layoutEngine": "grid", "responsiveBreakpoints": "640:2\n960:3\n1280:4", "skipElements": ".masonry__item--featured" }

Wichtige Fakten

Kategorie
Entwicklung & Web
Eingabetypen
number, text, select, textarea
Ausgabetyp
text
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der CSS-Masonry-Layout-Generator erstellt im Handumdrehen sauberen, kopierbaren HTML- und CSS-Code für responsive Wasserfall-Layouts. Ohne den Einsatz von JavaScript können Sie Spaltenanzahl, Abstände, Breakpoints und die bevorzugte Layout-Engine (CSS Columns oder Flexbox) individuell anpassen, um Bildergalerien oder Card-Grids perfekt darzustellen.

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.

So funktioniert es

  • •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.

Beispiele

1. Responsive Bildergalerie

Webentwickler
Hintergrund
Ein Entwickler baut eine Portfolio-Seite und benötigt ein Masonry-Grid für Bilder unterschiedlicher Höhe.
Problem
Einbindung eines responsiven Wasserfall-Layouts ohne schwere JS-Plugins.
Verwendung
Setze Spalten auf 4, Abstand auf 16px, wähle 'CSS Columns' und trage Breakpoints (z.B. 640:2, 960:3) ein.
Beispielkonfiguration
Spalten: 4, Gap: 16px, Layout-Engine: grid, Breakpoints: 640:2\n960:3
Ergebnis
Ein sauberes CSS-Snippet, das Bilder auf dem Desktop in 4 Spalten und auf mobilen Geräten in 2 oder 3 Spalten anordnet.

2. Blog-Übersicht mit Featured-Post

UI-Designer
Hintergrund
Ein Blog-Layout soll Artikel in einem Grid darstellen, wobei der neueste Artikel die volle Breite einnimmt.
Problem
Das Grid muss ein bestimmtes Element aus dem normalen Spaltenfluss ausschließen.
Verwendung
Wähle 3 Spalten, trage '.masonry__item--featured' in das Feld 'Elemente überspringen' ein und generiere den Code.
Beispielkonfiguration
Spalten: 3, Layout-Engine: flex, SkipElements: .masonry__item--featured
Ergebnis
Der generierte CSS-Code enthält spezielle Regeln, die das Featured-Element über die gesamte Container-Breite strecken, während der Rest im 3-Spalten-Layout bleibt.

Mit Samples testen

development
Milligram CSS Framework Beispiele
Milligram CSS-Framework-Beispiele einschließlich Typografie, Formulare, Grids und Komponenten
title token css
sample
Bulma CSS Framework Beispiele
Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster
title token css
sample
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
title token css
sample
CSS-Selektor-Beispiele
Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests
title token css
sample

Verwandte Hubs

Json-Generate-Tools
Entdecken Sie 33 json-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Design-Generate-Tools
Entdecken Sie 19 design-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Pdf-Generate-Tools
Entdecken Sie 10 pdf-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Audio-Generate-Tools
Entdecken Sie 8 audio-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

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.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/css-masonry-layout-generator

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
columns number Nein -
containerWidth text Nein -
gap text Nein -
layoutEngine select Nein -
responsiveBreakpoints textarea Nein -
skipElements textarea Nein -

Antwortformat

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Text: Text

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-css-masonry-layout-generator": {
      "name": "css-masonry-layout-generator",
      "description": "Erzeugt reine CSS-Masonry-Layouts mit Breakpoints, Abstaenden und optionalen Skip-Selektoren",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=css-masonry-layout-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]