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.

CSS Masonry Layout Generator

Free CSS masonry layout generator. Build Pinterest-style walls with grid-template-rows: masonry or a multi-column fallback, tune columns, gap and items, preview live, and copy the HTML and CSS. 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

In-depth guide

CSS Masonry Generator: Build Pinterest-Style Masonry Layouts With Pure CSS

Read the full guide →

CSS Masonry Layout Generator

Columns

Gap (px)

Items

Layout mode

Live preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

The preview approximates the generated CSS. Modern masonry rows need a browser that supports grid-template-rows: masonry; the fallback works everywhere.

HTML

<div class="masonry">
  <div class="card card-0">Item 1</div>
  <div class="card card-1">Item 2</div>
  <div class="card card-2">Item 3</div>
  <div class="card card-3">Item 4</div>
  <div class="card card-4">Item 5</div>
  <div class="card card-5">Item 6</div>
  <div class="card card-6">Item 7</div>
  <div class="card card-7">Item 8</div>
  <div class="card card-8">Item 9</div>
</div>

CSS

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

/* Fallback for browsers without masonry rows:
   they render a plain equal-row grid. */
@supports not (grid-template-rows: masonry) {
  .masonry { display: block; columns: 3; column-gap: 16px; }
  .masonry > .card { break-inside: avoid; margin-bottom: 16px; }
}

About this generator

This CSS masonry layout generator builds a Pinterest-style wall of cards without JavaScript. The modern mode uses the new grid-template-rows: masonry value with an automatic multi-column fallback for browsers that have not shipped it yet, while the fallback mode uses column-count with break-inside: avoid, which works everywhere today. Columns, gap and item count are configurable, the preview updates live, and the HTML and CSS copy out as a self-contained snippet. No libraries, no build step, no JavaScript required by the layout itself.

Why use it

Build photo galleries and card walls that pack tightly without equal-height rows.
Ship a working layout today with the multi-column fallback, then adopt real masonry as browsers ship it.
Skip heavy masonry libraries for a few kilobytes of pure CSS.
Tune columns and gap visually instead of editing numbers blind.
Copy-paste output that works in plain HTML, React, Vue or any stack.

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

Loading tool...

What is CSS Masonry Layout Generator?

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

In-depth guide

CSS Masonry Generator: Build Pinterest-Style Masonry Layouts With Pure CSS

Read the full guide →

.masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: masonry; gap: 16px; } /* Fallback for browsers without masonry rows: they render a plain equal-row grid. */ @supports not (grid-template-rows: masonry) { .masonry { display: block; columns: 3; column-gap: 16px; } .masonry > .card { break-inside: avoid; margin-bottom: 16px; } }

CSS Masonry Layout Generator

What is CSS Masonry Layout Generator?

Key Benefits

Common Use Cases

How to Generate a CSS Masonry Layout

Key Features

Frequently Asked Questions

Lottery Number Generator

Coin Flipper

Random Word Generator

QR Code Generator

Meme Generator

WiFi QR Code Generator

CSS Masonry Layout Generator

Live preview

About this generator

Why use it

Features

What is CSS Masonry Layout Generator?

Key Benefits

Common Use Cases

How to Generate a CSS Masonry Layout

Key Features

Frequently Asked Questions

Lottery Number Generator

Coin Flipper

Random Word Generator

QR Code Generator

Meme Generator

WiFi QR Code Generator

Live preview

About this generator

Why use it

Features