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

#9 226px

#18 226px

#1 277px

#10 243px

#19 64px

#2 126px

#11 242px

#3 139px

#12 266px

#4 64px

#13 51px

#5 92px

#14 103px

#6 124px

#15 192px

#7 253px

#16 207px

#8 253px

#17 266px