Masonry CSS

Masonry style layouts with just CSS

  1. First masonry block

    This is a pretty flexible technique, though, like so many others which attempt to resolve complex problems with just CSS, it too has its quirks and caveats.

  2. Second masonry block

    You can have all sorts of content within these blocks. Like an image!

    Radu Chelariu
  3. Third masonry block

    Or even a Google Maps iframe!

  4. Fourth masonry block

    It's not a revolutionary technique, but the thinking behind it is pretty creative.

  5. Fifth masonry block

    How about a YouTube video?

  6. Sixth masonry block

    The only real downside with this approach is the awkward alignment of the blocks. They align like in a newspaper, according to columns, not rows.

    As such, it's really only suited for layouts in which the order of the blocks is less important than the style of layout. Think Pinterest.

  7. Seventh masonry block

    Fun fact, this technique dates back to May, 2011. Pre-Pinterest, that is.

    However, Pinterest does not use this technique. What do you think, should I pitch it to them?

  8. Eighth masonry block

    No Javascript was used or harmed in the making of this demo page.