Masonry Gallery Demo
This is a Pinterest-style masonry gallery that varies both vertically and horizontally. The layout creates a more organic, flowing design compared to traditional justified rows.
📐 CSS Column Layout 🖼️ Variable Heights & Widths 📱 Responsive Design 🌙 Dark Mode Support
Balloon Fiesta 2025
© 2025 Danny Vint - All Rights Reserved
About This Layout
The masonry gallery uses CSS columns to create a Pinterest-style layout where images flow naturally in vertical columns. Unlike the justified gallery which maintains horizontal rows of equal height, the masonry layout creates a more dynamic appearance with varying vertical spacing.
Key Features:
- Images preserve their original aspect ratios
- Automatic column-based layout (4 columns on desktop, 3 on tablet, 2 on mobile)
- Smooth hover effects with scale and shadow transitions
- Full lightgallery integration with zoom, thumbnails, and sharing
- Quote request plugin support
- Comprehensive dark mode styling
Customization:
You can control the number of columns by setting the columnCount prop:
columnCount=3- 3 columns (more spacious)columnCount=4- 4 columns (default, balanced)columnCount=5- 5 columns (more compact)
Masonry Layout (This Page)
- ✓ Varies vertically and horizontally
- ✓ More organic, Pinterest-style flow
- ✓ Better for mixed aspect ratios
- ✓ Creates visual interest through variation
- ✓ Images preserve full aspect ratios
Justified Layout (Gallery.astro)
- ✓ Maintains horizontal rows
- ✓ Equal row heights
- ✓ More orderly appearance
- ✓ Better for uniform viewing
- ✓ Images may be slightly cropped to fit rows