←Back to Docs

Gallery Design Patterns

Curated layout recipes for showcasing configs, themes, and community creations. Each pattern is responsive, accessible, and tuned for Meridian's violet-pink palette.

M

Masonry Grid

Uneven-height cards packed with CSS columns. Ideal for screenshot galleries where aspect ratios vary. Pair with lazy-loaded images and hover overlays.

B

Bento Box

Asymmetric featured-hero layout with spanning tiles. Use CSS Grid named areas to highlight trending configs while secondary items fill surrounding slots.

C

Carousel Strip

Horizontal scroll-snap row with peek-a-boo edges. Perfect for “Featured this week” sections. Add gradient fade masks on the edges for depth.

F

Filterable Grid

Pill-shaped tag filters above a uniform card grid. Animate layout shifts with CSS transitions. Store filter state in URL search params for shareable views.

All patterns use Tailwind utility classes exclusively. No third-party animation or layout libraries. For implementation details, see the individual pattern pages linked from the docs sidebar.