masonry columns grid layout responsive pinterest Foto-Galerien mit unterschiedlichen Bildformaten Testimonial-Walls und Blog-Karten-Grids Portfolio-Grids und Pinterest-ähnliche Layouts Gleichmäßige Grids verschwenden Platz bei unterschiedlichen Card-Höhen Masonry-Layout ohne JS-Bibliothek wie Masonry.js
Masonry Columns
Fetch snippet JSON:
curl https://webspire.de/snippets/layout/masonry-columns.json Preview
Background
Customize
Quick Start
<div class="masonry"><div class="masonry-item">...</div><div class="masonry-item">...</div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 350 bytes · 23 lines
- Custom Properties
-
--masonry-cols--masonry-gap - Classes
-
.masonry.masonry-item
masonry columns grid layout responsive pinterest
Nutzt column-count für natives CSS-Masonry. break-inside: avoid verhindert das Zerteilen von Cards über Spaltengrenzen hinweg. Responsive via CSS Custom Property --masonry-cols (Standard: 3→2→1 bei 1024px/640px).