Gallery with Category Filter
A photo gallery with category filtering. Click filter buttons to show/hide items with smooth animations. Use arrow keys to navigate filters.
1 / 6
HTML Structure
<!-- Filter Buttons -->
<div class="rsl-gallery-filter" id="filter-1" role="tablist">
<button class="rsl-gallery-filter-btn active" data-filter="all">All</button>
<button class="rsl-gallery-filter-btn" data-filter="nature">Nature</button>
<button class="rsl-gallery-filter-btn" data-filter="architecture">Architecture</button>
</div>
<!-- Gallery Grid -->
<div class="rsl-gallery" data-filter="filter-1" data-lightbox="lightbox-1">
<article class="rsl-gallery-item rsl-gallery-item-tall" data-category="nature">
<a href="large.jpg" class="rsl-gallery-link">
<div class="rsl-gallery-image">
<img src="thumb.jpg" alt="Description" loading="lazy">
</div>
<div class="rsl-gallery-overlay">
<div class="rsl-gallery-info">
<h3 class="rsl-gallery-title">Title</h3>
<p class="rsl-gallery-meta">Category</p>
</div>
</div>
</a>
</article>
</div>Fixed Column Gallery
A simple 4-column gallery without filtering. Great for portfolios or product displays.
1 / 4
Fixed Columns
<!-- Fixed 4-column gallery -->
<div class="rsl-gallery" data-cols="4" data-lightbox="my-lightbox">
<article class="rsl-gallery-item">
<!-- Item content -->
</article>
<!-- More items... -->
</div>
<!-- Options: data-cols="2", data-cols="3", data-cols="4" -->Mixed Sizes Masonry
Create visual interest with tall, wide, and large items that span multiple grid cells.
1 / 6
Size Variants
<!-- Large (2 columns x 2 rows) -->
<article class="rsl-gallery-item rsl-gallery-item-large">...</article>
<!-- Tall (1 column x 2 rows) -->
<article class="rsl-gallery-item rsl-gallery-item-tall">...</article>
<!-- Wide (2 columns x 1 row) -->
<article class="rsl-gallery-item rsl-gallery-item-wide">...</article>
<!-- Standard (1 column x 1 row) -->
<article class="rsl-gallery-item">...</article>Balanced Masonry Gallery
Combines the Gallery component with the Balanced Layout for a true masonry effect. Items are distributed into columns using a shortest-column algorithm, eliminating gaps between varying height items.
1 / 9
Balanced Masonry Gallery
<!-- Balanced Masonry Gallery -->
<div class="responsive-slot-layout"
data-layout="balanced"
data-slots-xs="1"
data-slots-sm="2"
data-slots-md="3"
data-slots-lg="4">
<!-- Set height on slot-item wrapper -->
<div class="slot-item" data-category="landscape" style="height: 280px;">
<article class="rsl-gallery-item">
<a href="large.jpg" class="rsl-gallery-link" data-lightbox="my-lightbox">
<div class="rsl-gallery-image">
<img src="thumb.jpg" alt="Description">
</div>
<div class="rsl-gallery-overlay">
<div class="rsl-gallery-info">
<h3 class="rsl-gallery-title">Title</h3>
<p class="rsl-gallery-meta">Category</p>
</div>
</div>
</a>
</article>
</div>
<!-- Varying heights for true masonry effect -->
<div class="slot-item" data-category="urban" style="height: 350px;">
<article class="rsl-gallery-item">
<!-- Taller item -->
</article>
</div>
</div>
<!-- Required CSS: sections.css, gallery.css -->
<!-- Required JS: smart-sections-balanced.js, gallery.js -->How Balanced Layout Works
The balanced layout uses a shortest-column algorithm to distribute items. Each new item is placed in the column with the least total height, creating a true Pinterest-style masonry effect without gaps. Set explicit heights on gallery items for best results.
See FilterBus in Action
Gallery items can subscribe to FilterBus for cross-component filtering. See how one filter can control tables, KPI cards, charts, and gallery images simultaneously.
View FilterBus Dashboard Demo