Responsive Grid System

This page defines the standardized responsive grid patterns used throughout the web app.

Gallery layout (compact)

Use case: square thumbnails / dense galleries.

grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 md:gap-3 lg:grid-cols-5 lg:gap-3 xl:grid-cols-6 xl:gap-4

• Mobile: 2 columns
• Small: 3 columns
• Medium: 4 columns
• Large: 5 columns
• XL: 6 columns

Used by: LazyGallery, BlogGallery, TagGallery.

Card layout

Use case: content cards with text and images.

grid gap-10 sm:grid-cols-2 lg:grid-cols-3

• Mobile: 1 column
• Small: 2 columns
• Large: 3 columns

Guidelines

• Prefer a single compact grid for all galleries.
• Keep content-heavy layouts at a lower column count for readability.
• Ensure loading states (skeletons) match the final grid structure.