What is a CSS masonry layout?

A masonry layout is a grid of cards where each item keeps its natural height, filling gaps like a Pinterest wall. It is commonly used for image galleries, dashboards, and blog listings with varied content heights.

How can I create a masonry layout in CSS?

There are two common approaches: 1) CSS Columns (column-count / column-gap) — simple and well supported, but items order top-to-bottom; 2) CSS Grid with the masonry value (currently experimental, mainly Firefox). This tool generates both variants.

What is the difference between CSS Columns and CSS Grid masonry?

CSS Columns fills each column from top to bottom before moving to the next, has excellent browser support, and is the recommended option. CSS Grid masonry fills rows from left to right for a more natural reading order, but the masonry value is currently only supported experimentally in Firefox.

How do I make a masonry layout responsive?

Use media queries to change the column count at different breakpoints. The generated code includes breakpoints for small (≤640px), medium (≤1024px), large (≤1280px), and extra-large (>1280px) screens.

What kind of content suits a masonry layout?

Masonry layouts work best when items have varied heights, such as image galleries, user cards, or blog posts with different content lengths. Uniform cards may not benefit from a masonry layout.

CSS Masonry Layout Generator - Pinterest Grid Tool

← Back to Home › Design Tools › CSS Masonry Layout Generator

Visually create a Masonry/Pinterest layout and export the CSS code

Zero Dependencies · Works Offline

⚙️ Layout Parameters

Columns: 4

Gap: 16px

Padding: 12px

Border Radius: 8px

Card Background:

Method:

📱 Responsive Breakpoints

Small column count (≤640px):

Medium column count (≤1024px):

Large column count (≤1280px):

Extra-large column count (>1280px):

🎨 Preview Content

Card count: 12

Show images

👁️ Live Preview

📋 Generated Code

📖 What Can the CSS Masonry Layout Generator Do?

The CSS Masonry Layout Generator is an online visual tool for quickly creating Masonry/Pinterest-style page layouts. Tune the parameters and preview the layout live, then generate the CSS code. It supports both CSS Columns and CSS Grid masonry implementations, plus responsive breakpoint configuration.

Features

Live Preview: adjust parameters and see the layout update instantly
Two Implementations: CSS Columns (well supported) and CSS Grid masonry (experimental)
Responsive Config: small, medium, large, and extra-large breakpoints
Full Control: column count, gap, padding, border radius, and background are all tunable
Code Export: generates complete CSS code including responsive media queries

How to Use

Adjust the column count, gap, and other parameters — the preview updates live
Configure the column count for each responsive breakpoint
Choose an implementation method (CSS Columns is recommended)
Click "Generate" to view the complete CSS code
Click "Copy" to paste the code into your project

Use Cases

Image Gallery

For images of different sizes, the masonry layout lets each image keep its natural proportions, with smaller images automatically filling the gaps.

Blog Post List

When post summaries have different lengths, the masonry layout avoids large empty white spaces and fits more content per screen.

Card Feeds

For cards with mixed content — with or without images, with or without text — the masonry layout automatically adjusts the height to fit.

Technical Notes

CSS masonry builds on the CSS Multi-column Layout Module with the column-count and column-gap properties. Items are laid out from top to bottom and left to right, and move to the next column when one is full. The break-inside: avoid rule prevents cards from being split across columns. The masonry value in CSS Grid Level 3 is more natural for reading order, but browser support is currently limited, so CSS Columns is recommended.

📖 FAQ

Is the CSS Masonry Layout Generator free to use?

Yes, it is completely free and requires no signup. Everything runs locally in your browser — your settings and generated code never leave your device.

Does it work on mobile devices?

Yes. The tool is fully responsive and works on phones, tablets, and desktops. The generated CSS also includes media queries so your layout adapts to any screen size.

Can I export the generated code?

Yes. Click "Generate" to produce the complete CSS, then "Copy" to copy it to your clipboard. The output includes responsive media queries for all breakpoints.

Which method should I choose, CSS Columns or CSS Grid masonry?

For maximum browser compatibility choose CSS Columns. Choose CSS Grid with the masonry value if your target audience uses Firefox, where it is currently supported as an experimental feature.

Do I need to install any software?

No. It is a pure online tool — just open the page in your browser. No downloads, plugins, or installations are needed.

🧱 CSS Masonry Layout Generator