Edge Cases

Test the masonry layout with unusual item, column, and container settings.

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

Order mode: balanced Animate transitions

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 199px

#9 168px

#18 233px

#1 261px

#10 53px

#19 288px

#2 177px

#11 190px

#3 286px

#12 220px

#4 281px

#13 182px

#5 109px

#14 86px

#6 174px

#15 51px

#7 204px

#16 162px

#8 59px

#17 50px