Layout Waterfall

Waterfall Grid

The Waterfall layout (also known as Masonry) is optimized for content items with varying heights. It uses a column-based flow that packs items vertically, preventing large gaps between items of different sizes.

Basic Waterfall

3-Column Flow

Standard flow where items are ordered top-to-bottom within each column.

100px
180px
130px
160px
90px
HTML 
<div class="wf-waterfall wf-waterfall-3 wf-gap-4">
  <div class="wf-waterfall-item">...</div>
  <div class="wf-waterfall-item">...</div>
</div>

Interactive Example

Responsive Masonry Grid

Resize the viewport to see how the column count adjusts using responsive auto modifiers. Screen and tablet share the same column count, mobile is always two columns, and the phone defaults to a single column.

Waterfall Preview
screen
HTML 
<div class="wf-waterfall wf-waterfall-4 wf-gap-3">
  <div class="wf-waterfall-item">...</div>
  <!-- ... -->
</div>

Class Reference

All modifier classes available on .wf-waterfall

Class Name Type Description
wf-waterfall Base Initializes the waterfall container using CSS columns.
wf-waterfall-1 ... 6 Columns Sets the column count for the waterfall grid.
wf-gap-* Spacing Controls the horizontal and vertical gutter size.
wf-waterfall-item Child Ensures items don't break across columns.