Masonry Layout

Axiom01's masonry layout uses CSS Grid to create beautiful, responsive multi-column layouts with variable-sized items. Perfect for image galleries, portfolios, and content grids.

Live Examples

Masonry Grid with Variable Sizes

🎨
Design
🖼️
Wide Gallery
📱
Mobile
🏗️
Architecture
🎭
Creative
✨
Polish
⚡
Performance
🚀
Launch

HTML Structure

<div class="grid">
	<article class="card text-center">
		<div>🎨</div>
		<strong>Item 1</strong>
	</article>
	
	<!-- Wide item spanning 2 columns -->
	<article class="card text-center" class="demo-span-col">
		<div>🖼️</div>
		<strong>Wide Item</strong>
	</article>
	
	<!-- Tall item spanning 2 rows -->
	<article class="card text-center" class="demo-span-row">
		<!-- Content -->
	</article>
</div>

Features

  • Responsive Grid - Auto-fills columns based on space
  • Variable Sizes - Wide and tall item modifiers
  • Gap Control - Consistent spacing between items
  • Auto-Rows - Uniform row height management
  • Hover Effects - Smooth transitions on interaction
  • Mobile Responsive - Single column on small screens

Use Cases

  • Image Gallery - Portfolio and photography showcase
  • Product Grid - E-commerce product listings
  • Content Cards - Mixed-size content display
  • Dashboard - Widget and panel layout
  • Portfolio - Project showcase with variety
  • Blog Archive - Featured and regular posts

Accessibility

  • Include alt text for images
  • Use semantic grid item containers
  • Ensure keyboard navigation works
  • Maintain focus visibility on all items
  • Provide labels for unlabeled content
  • Test with screen readers

Responsive Behavior

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

  • Optimized for small screens
  • Touch-friendly spacing maintained (44px minimum)
  • Text wraps naturally without overflow
  • Content density optimized for readability

Desktop (1024px+)

On desktop displays:

  • Enhanced visual features
  • Hover states and transitions
  • Full keyboard navigation support
  • Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:
  • Framework handles media queries
  • No custom CSS required
  • Mobile-first approach applied
  • Accessibility maintained at all sizes

Best Practices

  • Consistent Spacing - Uniform gaps between items
  • Visual Hierarchy - Vary sizes purposefully
  • Content Strategy - Logical item ordering
  • Image Optimization - Properly sized images
  • Responsive Design - Test on all breakpoints
  • Performance - Lazy load images if needed