CSS Masonry Layout Generator
Free CSS masonry layout generator. No JavaScript needed.
Loading tool...
What is CSS Masonry Layout Generator?
The CSS Masonry Layout Generator builds Pinterest-style card walls in pure CSS. Modern mode uses grid-template-rows: masonry with an automatic multi-column fallback for older browsers, fallback mode uses column-count with break-inside: avoid, and columns, gap and item count are all configurable. The live preview shows varied card heights like a real page, and the HTML and CSS copy out as a self-contained snippet with no JavaScript required.
Key Benefits
- Tight Pinterest-style packing without equal-height row hacks
- Works today in every browser via the multi-column fallback
- No masonry libraries: a few lines of pure CSS
- Visual tuning of columns and gap with live feedback
- Output that drops into plain HTML, React or Vue unchanged
Common Use Cases
- •Photo gallery and portfolio walls with mixed image heights
- •Blog card grids where summaries vary in length
- •Dashboard widget boards that pack densely
- •Product listing pages with variable aspect ratios
- •Learning how real CSS masonry differs from the fallback
How to Generate a CSS Masonry Layout
- Set the layout: Choose the column count, gap and item count. The live preview re-renders immediately with varied card heights.
- Pick the mode: Modern mode uses grid-template-rows: masonry with a @supports fallback. Fallback mode uses multi-column CSS that works in every browser today.
- Copy the code: Copy the HTML and CSS separately and paste them into your project. No JavaScript and no libraries are needed for the layout itself.
Key Features
- Modern grid-template-rows: masonry mode with @supports fallback
- Column-count fallback mode that works in every browser
- Configurable columns, gap and item count
- Live preview with varied card heights like a real page
- Separate copy buttons for the HTML and the CSS
Frequently Asked Questions
What is grid-template-rows: masonry?
It is a newer CSS Grid feature that packs items into each column tightly, like masonry, while keeping the simplicity of a grid container. Browser support is still rolling out, which is why the generator pairs it with an automatic multi-column fallback via @supports.
Which mode should I use?
Use the fallback multi-column mode if you need identical behaviour in every browser today. Use modern mode if your audience is on recent browsers or you can accept a plain grid as the fallback; it is the cleaner markup and the future of CSS masonry.
Does the layout need JavaScript?
No. Both modes are pure CSS: modern mode is a grid container with masonry rows, and fallback mode is CSS multi-column with break-inside: avoid. The page needs no script for the layout to work.
Why do items flow down columns instead of across rows?
Masonry fills vertically, column by column, which is how Pinterest-style walls balance uneven card heights. The order is top-to-bottom per column rather than left-to-right per row, so keep the reading order in mind for content that must be strictly sequenced.
Featured in Collections:Designer's Toolkit