Gallery layouts

The gallery ships with two layouts. Set yours under Before After Gallery → Settings → Appearance with the Gallery Layout option.

Classic grid (Free & Pro)

The default layout: a responsive grid of case cards with a filter sidebar (Pro) and a category selector at the top. Clicking a card opens the case modal with the comparison slider.

• Best for a structured, catalog-style gallery.
• Supports the card aspect ratio option for a uniform grid.
• Filters appear in a left sidebar (which you can hide).

Masonry cards (Pro)

A Pinterest-style layout with variable-height cards and a redesigned, immersive case modal.

• Filters open in a click-to-open drawer instead of a fixed sidebar.
• Cards show a per-pair viewer, a before/after toggle, category pills and meta chips.
• The case modal includes a Treatment Overview panel and an About this case section.
• Card aspect ratio is ignored (masonry uses each image’s natural height).

Choosing columns

Both layouts respect the Grid Columns setting — auto (responsive), 2, 3 or 4. On smaller screens the gallery automatically reduces columns for readability.

Good to know

• The layout choice changes which view modes are available in the comparison viewer — see Comparison & labels.
• Switching layouts only changes presentation; your cases and categories are unchanged.