0Pricing
CSS Academy · Lesson

Masonry Layout: CSS and JS Approaches

Create Pinterest-style masonry grids using CSS column-count and JavaScript fallback strategies.

What is Masonry?

Masonry layout places items in columns where each item fills the next available vertical space, like Pinterest. Items have equal column widths but variable heights. The result: a dense, visually dynamic grid with no wasted white space between rows.

CSS Grid Masonry (Experimental)

Chrome and Firefox behind a flag support grid-template-rows: masonry. Items are placed in columns but rows are sized to their content height, allowing variable-height items to pack without gaps. This is the future native solution.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 1rem;
}

All lessons in this course

  1. Sticky Footer and Sidebar Layout
  2. Holy Grail Layout with Grid
  3. Masonry Layout: CSS and JS Approaches
  4. Intrinsic Design: Content-Driven Sizing
← Back to CSS Academy