# CSS Masonry Layout Generator

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

> Canonical page: https://elysiatools.com/en/tools/css-masonry-layout-generator

- **Category:** Development

- **Keywords:** css, masonry, layout generator, responsive grid, flexbox, waterfall layout

## Overview

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

## Inputs

- **Columns** (number)
- **Container Width** (text)
- **Gap** (text)
- **Layout Engine** (select)
- **Responsive Breakpoints** (textarea): 640:2 960:3 1280:4
- **Skip Elements** (textarea): .masonry__item--featured .masonry__hero

## When to use

- Building image galleries or portfolio grids where items have varying heights.
- Creating responsive blog post feeds that adapt seamlessly to mobile, tablet, and desktop screens.
- Implementing lightweight masonry layouts without adding heavy JavaScript libraries to your project.

## How it works

- Define the maximum number of columns, container width, and the gap spacing between your cards.
- Choose your preferred layout engine: CSS Columns for a classic waterfall effect or Flexbox for predictable row wrapping.
- Add responsive breakpoints (e.g., 640:2) and specify any CSS selectors that should skip the masonry flow to span full width.
- Copy the generated HTML scaffold and commented CSS directly into your project.

## Use cases

- Designing a Pinterest-style image gallery with varying aspect ratios.
- Structuring an e-commerce product grid featuring promotional banners that span the full width.
- Developing a responsive news feed where article cards adjust their column count based on the user's device.

## Frequently asked questions

### 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%).

## Related tools

- [Tailwind Color Palette Sync](https://elysiatools.com/en/tools/tailwind-color-palette-sync): Generate theme.extend.colors for tailwind.config.ts from HEX colors, with WCAG contrast levels and optional dark mode.
- [cURL to Go (net/http) Converter](https://elysiatools.com/en/tools/curl-to-go): Convert a cURL command into a Go net/http code snippet with http.NewRequest, headers, and body
- [cURL to JavaScript (axios) Converter](https://elysiatools.com/en/tools/curl-to-js-axios): Convert a cURL command into a JavaScript axios code snippet with config object, headers, and data
- [cURL to JavaScript (fetch) Converter](https://elysiatools.com/en/tools/curl-to-js-fetch): Convert a cURL command into a JavaScript fetch() code snippet with headers, body, and method
- [cURL to PHP (cURL) Converter](https://elysiatools.com/en/tools/curl-to-php): Convert a cURL command into a PHP cURL code snippet with curl_setopt, headers, and post fields
- [cURL to Python (requests) Converter](https://elysiatools.com/en/tools/curl-to-python): Convert a cURL command into a Python requests code snippet with headers, data, and method
- [URL Shortener](https://elysiatools.com/en/tools/url-shortener): Generate short URLs using real URL shortening services (is.gd and v.gd)
- [API Contract Stress Tester](https://elysiatools.com/en/tools/api-contract-stress-tester): Generate boundary-value test cases from an OpenAPI 3.x document and optionally send them to a real backend to spot contract mismatches

## Samples

- [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns
- [CSS Viewer Samples](https://elysiatools.com/en/samples/css-viewer-samples): Sample CSS stylesheets (variables, flexbox/grid, animations) for the in-browser CSS Viewer
- [Milligram CSS Framework Samples](https://elysiatools.com/en/samples/milligram): Milligram CSS framework examples including typography, forms, grids, and components
- [Tailwind CSS Samples](https://elysiatools.com/en/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations

## Related content

- [CSS Authoring, Layout, and Cascade Workflows](https://elysiatools.com/en/hubs/css-authoring-layout-and-cascade-workflows): Write and review CSS with readable formatting, selector diagnostics, responsive snippets, visual effects, and rendered-intent checks.