CSS Masonry Gallery Generator - Online Flexible Grid

A CSS masonry gallery is a grid layout where items are placed in optimal positions based on available vertical space, similar to how bricks fit together in a wall. Unlike traditional grids with uniform rows, masonry layouts allow items of varying heights to pack tightly, eliminating gaps. The most common pure-CSS approach uses the column-count and column-gap properties, creating a Pinterest-style waterfall effect without JavaScript.

CSS Columns (column-count) offer the simplest pure-CSS masonry with excellent browser support (97%+). Items flow top-to-bottom per column. CSS Grid with grid-template-rows: masonry is the native solution but is still experimental (only in Firefox behind a flag). For production sites today, CSS Columns are the recommended approach. Use break-inside: avoid on items to prevent them from splitting across columns.

This happens when the browser tries to balance column heights. The fix is to apply break-inside: avoid to each gallery item. This CSS property tells the browser not to break the element's content across column boundaries. Additionally, setting display: block on images and wrapping them in a container element helps ensure each item stays intact.

Use CSS media queries to adjust column-count at different breakpoints. A common pattern: 1 column on mobile (<576px), 2 columns on tablets (576px–991px), 3–4 columns on desktop (≥992px). This tool generates responsive code automatically — adjust the Desktop, Tablet, and Mobile sliders above and copy the resulting CSS.

Absolutely! Popular hover effects include transform: scale(1.03) for a subtle zoom, increased box-shadow for depth, and overlay captions using pseudo-elements. Toggle the "Hover Zoom" option above to see it in action. For overlay effects, add a ::after pseudo-element with a gradient background that appears on hover.

CSS column-count and column-gap are supported in all modern browsers including Chrome, Firefox, Safari, and Edge — covering over 97% of global users. break-inside: avoid has similarly broad support. For IE11 (if needed), consider a JavaScript-based fallback. The code generated by this tool uses only well-supported CSS properties safe for production use.

CSS Columns fill content top-to-bottom per column, not left-to-right per row. The first items go into the first column until it's full, then into the second column, and so on. This means the visual order may differ from the DOM order. If left-to-right reading order is critical (e.g., for a chronological feed), consider using a JavaScript masonry library like Masonry.js or a CSS Grid approach with calculated grid-row-end spans.

Pure CSS masonry is faster — no JS execution overhead, no layout recalculations, instant rendering. It's lighter — zero dependencies, just a few lines of CSS. It's more accessible — works even with JS disabled. The trade-off is the top-to-bottom column flow order. If the visual order matters less than performance and simplicity, CSS Columns are the ideal choice.