What is the difference between CSS Columns and Flexbox engines?

CSS Columns create a true vertical masonry flow (waterfall), while Flexbox wraps items into rows, which is better for maintaining horizontal reading order but may leave uneven bottom edges.

How do I format the responsive breakpoints?

Enter one rule per line using the format width:columns. For example, 768:2 means the layout will display 2 columns at a viewport width of 768px.

What are skip elements?

Skip elements are specific CSS selectors (like .featured-card) that bypass the standard masonry flow, allowing them to span the full width of the container.

Does this tool require JavaScript to run the layout?

No, the generated code relies entirely on pure CSS, ensuring fast load times and no JavaScript dependencies.

Can I use custom CSS units for the gap and container width?

Yes, you can use any valid CSS unit, such as px, rem, %, or even CSS functions like min(1200px, 100%).

Elysia Tools

Navigation

Development

CSS Masonry Layout Generator

Generate pure CSS masonry-style layouts with responsive breakpoints, configurable gaps, and optional full-width skip selectors

Details

What this tool helps you do

Enter the target column count, container width, gap, and optional breakpoint rules, then choose whether you want a CSS-columns implementation or a Flexbox wrap implementation. The tool outputs ready-to-copy HTML and CSS with comments.

How to use it:

Columns: desired maximum columns on the largest breakpoint
Container Width: any CSS width value such as 1200px, 100%, or min(1200px, 100%)
Gap: spacing between cards such as 16px or 1rem
Layout Engine: choose CSS columns for a classic masonry-like waterfall, or Flexbox for a more predictable row wrap
Responsive Breakpoints: one rule per line like 640:2, 960:3, 1280:4
Skip Elements: optional selectors that should span full width or avoid the standard card flow, such as .masonry__item--featured or :nth-child(5)

Output:

ready-to-copy HTML scaffold
commented CSS
breakpoint summary and skip-selector notes

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

CSS Masonry Layout Generator

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Responsive Image Gallery

2. Blog Feed with Featured Posts

FAQ

Bulma CSS Framework Samples

CSS Viewer Samples

Milligram CSS Framework Samples

Tailwind CSS Samples

cURL to Go (net/http) Converter

cURL to JavaScript (axios) Converter

cURL to JavaScript (fetch) Converter

cURL to PHP (cURL) Converter

JSON Schema, Mock Data, and API Fixture Generators

CSS Effects, Palettes, and Design Token Generators

Printable PDF Layout and Template Generators

Audio Preview, Tone, and Effect Generator Tools