MasonFilter

A production-ready, no-code masonry grid for portfolios, galleries and case-study walls. Cards of any height pack tightly with true shortest-column-first logic, then reflow with smooth animation as visitors filter and sort.

Masonry

• Per-item aspect ratio for varying heights

• Adjustable gap

Responsive

• Auto (min column width) or Breakpoints mode

• Separate Desktop / Tablet / Mobile column counts

• Custom breakpoints; adapts to any width

Filtering

• Toggle the filter bar

• Multi-category tags an item can live in several filters

• Add, remove and reorder filter buttons

• Editable Filter / All labels

• Default: Branding, Web, Photography, Illustration, 3D

Sorting

• Toggle the sort bar

• Add, remove and reorder sort buttons

• Presets: Featured, Name A–Z, Name Z–A, Newest, Oldest, Category

• Per-item Number powers Newest / Oldest

Animation

• FLIP-style reflow on every filter and sort

• Adjustable duration

• Six easings: Ease Out, In-Out, Spring, Linear, Circ Out, Back Out

• Stagger for a cascade

Lightbox

• Click action: Lightbox / Open Link / None

• Fullscreen viewer, prev/next scoped to filtered items

• Keyboard nav (arrows + Esc)

• Toggle arrows, counter, caption; loop

• Custom backdrop, control, caption colors and radius

Per item

• Responsive image (srcSet), title, subtitle

• Multi-select categories, number, aspect ratio, background, link

Card styling

• Radius, background, optional shadow

• Text on image or below

• Show/hide title and subtitle

• Title/subtitle color, size and font; text padding

• Hover scale and lift

Toolbar styling

• Alignment: Left / Center / Right / Spread

• Bar gap and gap to grid

• Label color; button radius, padding, font size

• Active and idle colors

  Filterable, sortable masonry with true column packing, animated reflow, a fullscreen lightbox and full styling control responsive and no-code.

  masonry, gallery, portfolio, grid, lightbox, sortable, responsive, photography, animated