Edge Cases & Stress Tests

Interactive demo to test the masonry layout with various edge cases and automated stress tests. Use the controls to adjust parameters and observe layout behavior.

Item Settings

Number of items: 20 Min height: 50px Max height: 300px Fixed height (use min only)

Column Settings

minColWidth: 200px maxColWidth: 400px gap: 15px

Layout & Animation

Order mode: balanced Animate transitions Duration: 200ms

Container Settings

Container width: 100% Constrained max-width (800px)

Virtualization

Enable virtual scrolling Scroll height: 500px Overscan: 5

Quick Presets

🛡️ CSS Reset Compatibility

Test that Masonry resists CSS resets like Tailwind Preflight. Toggle the reset to inject div { display: block } into the page. Layout should remain intact due to inline styles. (issue #48)

🔥 Automated Stress Tests

Width: 0px Height: 0px Columns: calculating... Items: 20 Order: balanced

#0 116px

#9 181px

#18 229px

#1 90px

#10 119px

#19 136px

#2 98px

#11 214px

#3 182px

#12 88px

#4 176px

#13 123px

#5 51px

#14 230px

#6 96px

#15 81px

#7 263px

#16 55px

#8 276px

#17 119px