Pinterest-style mosaic. Each tile is as tall as it needs to be; shorter items fill in below taller ones. CSS columns or Masonry.js.
Named after the way bricklayers stack bricks, a masonry layout arranges cards in columns where each card's height is determined by its content. Short items fill in below taller items in adjacent columns, rather than leaving empty space. This creates a Pinterest-style mosaic that feels organic and content-rich.
The simplest CSS approach uses the columns property: columns: 3 on the container makes content flow into 3 columns automatically, with each item taking only as much height as it needs. Items flow down the first column, then the second, then third. For more control, libraries like Masonry.js or Packery position each item manually.
Filter by category. Notice how shorter tiles tuck under taller ones.
Build a photography portfolio gallery using masonry layout. Use CSS columns: 3 with column-gap: 12px on the container. Each image card should be display:inline-block, width:100%, margin-bottom:12px. Images should be different heights (some portrait, some landscape) to show the masonry effect clearly. Add a hover overlay on each image showing a brief caption and a zoom icon. On mobile (under 768px), reduce to columns:2. Under 480px, reduce to columns:1. Include a category filter bar at the top (All, Architecture, Portraits, Nature) that filters which images show.