Portfolio and Gallery Layouts

Responsive Grid Layouts

• Use CSS Grid for gallery layouts: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
• Flexbox for flexible card layouts
• Adjust columns per breakpoint:
  • Mobile (< 768px): 1-2 columns
  • Tablet (768px-1024px): 2-3 columns
  • Desktop (> 1024px): 3-4 columns

Image Optimization

• Use picture element for art direction
• Lazy load with: loading="lazy"
• Size images appropriately (max 200KB for thumbnails)
• Use WebP with JPG fallback