CSS Masonry Layouts
summary
Browser engines prototype masonry as an extension of CSS Grid with two concrete syntaxes: grid-template-rows: masonry or display: masonry, demos live in Safari Tech Preview. Examples show equal-width columns, column spanning and variable track widths, explicit placement for sidebars, and a zigzag tab order. Performance slows with very large DOMs, dense layouts or mixing intrinsic and fixed tracks (dense packing). Animations and view transitions are experimental; don’t ship production layouts yet.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:10Welcome
- 4:36What is Masonry
- 8:17What is Masonry Not
- 10:50Vertical vs Horizontal
- 11:44Easy to Learn
- 17:46Spanning columns
- 21:40What do you want
- 22:35Use case
- 28:50More demos
- 30:15Feature requests
- 31:06Collapse in both directions
- 32:09Pros and cons
- 35:36Slowness
- 38:57Grid or Masonry
- 39:45Conclusion
