Demos

CSS Masonry demos

This directory contains demo pages that showcase the implementation of CSS Masonry in the Chromium browser engine.

See also:

• Masonry layout at MDN.

Enable Masonry support

To try the demos, first enable Masonry:

1. Use a Chromium-based browser, such as Microsoft Edge or Chrome, and make sure the version is at least 140.
2. In the browser, open a new tab and go to about:flags.
3. Search for “CSS Masonry Layout” in the search box.
4. Set the CSS Masonry Layout flag to Enabled, and then restart the browser.

Demos

• Blog

  

• Masonry is awesome

  

• New York City photos

  

• Nature photos with multiple layouts

  

• News site: The Daily Oddity

  

• Masonry syntax examples:

  • Same size columns
  • Same size rows
  • Default track size
  • Custom track sizes
  • Masonry shorthand
  • Spanning multiple tracks
  • Item tolerance

This site is open source. Improve this page.