CSS Academy · Lesson

Masonry Layout: CSS and JS Approaches

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

Masonry Layout: CSS and JS Approaches is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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;
}

CSS Columns Approach

CSS columns create a masonry-like layout: columns: 3; column-gap: 1rem. Items flow top-to-bottom within each column automatically. Limitation: items are ordered column-by-column (top of col 1, top of col 2...) not row-by-row, which affects reading order and accessibility.

Avoiding Column Breaks

Prevent items from breaking across columns: break-inside: avoid on each item. Without this, a tall card can split across two columns, cutting content in half. Always add this when using CSS columns for card-like content.

JavaScript Masonry Libraries

Masonry.js (by David DeSandro) repositions absolutely-positioned items by calculating column heights and placing each item into the shortest column. Isotope extends this with sorting and filtering. Both require JavaScript to calculate and apply positions.

CSS Grid + JS Hybrid

A lightweight approach: define a grid with fixed columns and 1px rows, then use JS to set grid-row-end: span N on each item based on its content height / row height. Items maintain grid row alignment while achieving variable heights.

ResizeObserver for Recalculation

Masonry positions become stale when window size changes or images load. Use ResizeObserver to detect size changes and trigger recalculation. Debounce recalculations to avoid excessive computation during rapid resize events.

Image Loading and Layout Stability

Images with unknown heights cause masonry to recalculate after they load. Provide explicit width and height attributes on all images so the browser reserves space before loading. This prevents position shifts and reduces the number of recalculation passes.

Infinite Scroll with Masonry

Appending items to a masonry layout requires recalculating only the affected columns (the new items) not the entire grid. Libraries like Masonry.js support appended item animation and incremental layout without full relayout on each new batch.

Accessibility Considerations

Visual masonry order differs from DOM order with JavaScript-positioned layouts. Ensure Tab order follows DOM order (logical reading sequence) not visual position. Add tabindex carefully or rely on natural DOM flow for keyboard navigation.

CSS-Only Masonry Trade-offs

CSS columns: simple, no JS, but column-order (not row-order) reading sequence and no filtering/sorting. Grid masonry: not production-supported yet. JS masonry: fully featured but adds weight and a rendering delay as positions are calculated after content loads.

Knowledge Check

What CSS property prevents a card from splitting across two CSS columns?

Summary

Masonry layout can be achieved with CSS columns (simple but column-ordered), the experimental grid-template-rows: masonry (future-looking), or JavaScript libraries like Masonry.js (full-featured with sorting and filtering). Each approach involves trade-offs between simplicity, accessibility, and capability.

Frequently asked questions

Is the “Masonry Layout: CSS and JS Approaches” lesson free?

Yes — the full text of “Masonry Layout: CSS and JS Approaches” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Masonry Layout: CSS and JS Approaches”?

Create Pinterest-style masonry grids using CSS column-count and JavaScript fallback strategies. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Masonry Layout: CSS and JS Approaches” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy