Portfolio Filter Grid — Isotope-Style HTML CSS JS

A filterable grid — the "Isotope" pattern — lets visitors narrow a portfolio, gallery, or catalogue by category with a single tap, and the items that match animate into place. It is a staple of portfolio sites, case-study pages, and project galleries. This snippet implements it in plain HTML, CSS, and vanilla JavaScript with a smooth, dependency-free reveal: category tabs with counts, a responsive grid, a staggered scale-in for matching items, and an empty state.

Tag-based filtering

Every grid item carries a data-cat attribute, and every tab a data-filter. filterItems moves the active class to the clicked tab, then loops the items: those whose category matches the filter (or the special all) stay visible, the rest get a .hide class that sets display: none. This is the simplest robust filtering model — no layout library, no DOM reordering, just a class toggle per item driven by data attributes.

Staggered scale-in reveal

Matching items don't just appear — they animate in. For each visible item, filterItems sets an animation-delay based on a running visible-count, then re-triggers a pf-in keyframe (opacity + scale + translate) using the remove-class / force-reflow / add-class trick. The result is a pleasing cascade where the filtered items pour into the grid left-to-right, every time you change tabs. Because the animation uses only transform and opacity, it runs on the compositor and exports cleanly to utility frameworks (which animate transforms but not layout).

Why display:none over a FLIP reorder

True Isotope animates items physically sliding to new positions (the FLIP technique), which is impressive but fragile and heavy. This snippet deliberately uses display: none for non-matching items and an entrance animation for matching ones — the matching items fade and scale in while the grid reflows instantly underneath. It is far simpler, has no edge cases, and reads as polished for the vast majority of portfolio use cases.

Counts and empty state

Each tab shows a count of items in that category, helping users gauge what's there before clicking. After filtering, filterItems reveals a "No projects in this category" message if nothing matched — a graceful end state instead of a blank grid. The grid itself is a responsive three-column layout that collapses to two on mobile, with square aspect-ratio tiles and a legibility gradient over each.

Swap the tiles for real project thumbnails and link them out. Pair this with an image lightbox for full views, a masonry grid for varied heights, or a chip filter for multi-tag filtering.