Native CSS Grid Masonry: grid-template-rows: masonry Layout Rules
- Last updated
- Prerequisites:
- CSS Grid fundamentals
- Understanding of block/inline axes and item placement
- css
- masonry
- grid
- layout
- grid-template-rows
- columns
Read at your depth
The practical view
Masonry layout is a grid where one axis is normal (columns) and the other axis flows items into the shortest track (like Pinterest cards). The draft syntax: .masonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: masonry; }. Items keep their intrinsic height and are placed into the column with the most free space. Today this is a CSS Grid Level 3 proposal — check browser flags — and the common fallback is CSS columns (column-count) or a JS masonry library. The key difference from regular grid: no row alignment — each column's items stack independently.
The same idea in other frameworks
React image-wall components can switch from JS masonry (columns-js) to native grid masonry where supported.Angular apps can replace third-party masonry directives with CSS masonry behind feature flags.Vue gallery components benefit from CSS masonry for CSS-driven placement without resize observers.Svelte components render the same markup; CSS masonry removes the JS measurement layer for card walls.Legacy vs modern
CSS columns hack vs native grid masonry
CSS columns split content vertically (breaking card order and DOM flow); grid masonry places items into the shortest column preserving order.
.wall { column-count: 4; column-gap: 16px; } /* ❌ OLD: content flows top-to-bottom per column, order breaks */.wall { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: masonry; } /* ✅ NEW */Interview gotchas
Context
This probes whether you understand the placement algorithm difference — that masonry is a 'fill the shortest track' greedy flow rather than the sparse/dense grid cursor algorithm.
The mechanical answer
Normal grid auto-placement uses a grid cursor: items are placed in order along the grid axis, and dense packing backtracks to fill holes left by earlier spanning items. The grid has a fixed number of rows/columns, and items align to the grid lines — which is why variable-height content leaves gaps. Masonry replaces the block-axis structure: there is no fixed set of rows; each item is placed at the masonry-axis position of the currently shortest track (computed as the max of the running end positions of the tracks it spans, plus gaps). This preserves intrinsic sizes and eliminates gaps. Spanning items still occupy multiple grid-axis tracks and advance them together. It is a distinct placement algorithm, not a grid with special sizing.
Trap
The naive answer is 'masonry is just grid with auto rows'. Auto rows create a rigid row structure that forces every item into a row and leaves gaps; masonry has no row alignment at all. Another trap: thinking items are reordered visually — they are placed in DOM order into the shortest column, which is why reading/focus order stays correct (unlike the CSS columns hack). Candidates who explain the shortest-track greedy rule show real understanding.
Context
This is the practical interview question — most developers have used the columns trick and interviewers want the structural reason it is not a real masonry solution.
The mechanical answer
CSS multi-column layout splits content into a vertical sequence of columns: the first N items fill column 1, the next fill column 2, etc. That changes the visual reading order (top of column 1, then top of column 2) away from the DOM order, which affects keyboard navigation, screen readers, and find-in-page. It also requires break-inside: avoid to stop cards splitting across columns, and column heights are driven by content balance rather than shortest-column placement. Native grid masonry keeps DOM order and places each item into the shortest column, so reading order matches the source and no gaps appear. The hack is a visual approximation; masonry is a real placement algorithm.
Trap
The naive answer is 'columns and masonry are the same thing'. The columns hack reorders content vertically and cannot place items into the shortest column. Another trap: assuming the masonry spec is stable everywhere today — grid-template-rows: masonry is a draft (Grid Level 3); check flags, and keep a columns/JS fallback. Candidates who mention reading order and spec status show real-world awareness.