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.

Elysia Tools

Mobile Navigation

Development

CSS-Masonry-Layout-Generator

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

Einzelheiten

Wobei dieses Tool hilft

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

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

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 { ... } ```

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

6 Optionen

InhaltHaupteingaben einfügen oder eingeben.4

Container-BreitetextOptionales FeldAbstandtextOptionales FeldResponsive BreakpointstextareaOptionales FeldElemente ueberspringentextareaOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.2

SpaltennumberOptionales FeldLayout-EngineselectOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

CSS-Masonry-Layout-Generator

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Responsive Bildergalerie

2. Blog-Übersicht mit Featured-Post

FAQ

Bulma CSS Framework Beispiele

CSS-Beispiele

Milligram CSS Framework Beispiele

Tailwind CSS Samples

cURL-zu-Go (net/http) Konverter

cURL-zu-JavaScript (axios) Konverter

cURL-zu-JavaScript (fetch) Konverter

cURL-zu-PHP (cURL) Konverter

Generatoren fur JSON-Schemas, Mock-Daten und API-Fixtures

Generatoren fur CSS-Effekte, Paletten und Design-Tokens

Generatoren fur druckbare PDF-Layouts und Vorlagen

Tools fur Audio-Previews, Tone und Effekt-Erzeugung