CSS masonry arrives for testing in Chrome and Edge

In July 2025, the Chrome and Edge development teams announced the availability of CSS Masonry for early developer testing in versions 140 and later. This new layout mode allows for the creation of brick-like arrangements of items, filling gaps to create a seamless grid, similar to a brick wall. Unlike CSS Grid, Masonry is better suited for one-dimensional flow layouts, such as image galleries, where the focus is on filling space efficiently rather than aligning items along both axes. This feature is particularly useful for accommodating elements with varying aspect ratios, providing greater design freedom and enabling the creation of dynamic, responsive layouts that adapt to content variations without the need for manual adjustments or non-standard JavaScript implementations.

To test CSS Masonry, developers can follow these steps:

• Use Chrome or Edge 140 or later (or another Chromium-based browser with a matching version).
• Navigate to about:flags in a new tab.
• Search for “CSS Masonry Layout”.
• Enable the flag.
• Restart the browser.

With the feature enabled, developers can explore its capabilities through various demos provided by Microsoft Edge, showcasing different use cases and layouts.

Understanding CSS Masonry

CSS Masonry is a layout mode that arranges items in a brick-like pattern, filling gaps to create a seamless grid. Unlike traditional CSS Grid or Flexbox, Masonry focuses on one-dimensional flow layouts, making it ideal for content with varying aspect ratios. This approach allows for efficient use of space, especially in scenarios like image galleries or news sites, where items of different sizes need to be displayed cohesively.

In a Masonry layout, items are placed within columns or rows in a collapsed manner, similar to vehicles queuing in lanes, where each item seeks the closest available space. This behavior ensures that the visual order of items is less important than the final design, allowing for a more flexible and dynamic arrangement.

One of the key features of CSS Masonry is its ability to allow items to span multiple tracks, similar to CSS Grid. This means that larger items can occupy more space, while smaller items fill the remaining gaps, leading to a compact and efficient layout. This auto-placement behavior has been a long-standing goal for web designers, and CSS Masonry brings it closer to reality.

Implementing CSS Masonry

To create a basic Masonry layout using CSS, developers can utilize the grid-template-rows property with the value masonry. This approach defines the rows as a masonry axis, while the columns remain as a grid axis. The child elements of the container will then lay out item by item along the rows, as they would with regular grid layout automatic placement.

For example, to create a Masonry layout with three columns, developers can use the following CSS:

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

This CSS rule sets up a grid with three equal-width columns and applies the masonry layout to the rows, allowing items to flow and fill gaps naturally.

Browser Support and Compatibility

As of September 2025, CSS Masonry is available for testing in Chrome and Edge versions 140 and later. To enable this feature, developers need to access the browser’s experimental features settings and enable the “CSS Masonry Layout” flag. It’s important to note that this feature is still experimental, and developers should be aware of potential issues and limitations when using it in production environments.

Other browsers, such as Firefox and Safari, have not yet implemented CSS Masonry. Developers should check the latest browser compatibility tables and documentation for updates on support for this feature.

Use Cases and Applications

CSS Masonry is particularly useful for creating dynamic and responsive layouts where items of varying sizes need to be displayed cohesively. Common use cases include:

• Image Galleries: Displaying images of different dimensions in a compact and organized manner.
• News Sites: Arranging articles with varying lengths and images in a visually appealing layout.
• Blogs: Presenting posts with different content lengths and media types in a seamless grid.

By utilizing CSS Masonry, developers can create layouts that adapt to content variations without the need for manual adjustments or non-standard JavaScript implementations, leading to more efficient and maintainable code.

Feedback and Community Involvement

The Chrome and Edge development teams have emphasized the importance of community feedback in shaping the final implementation of CSS Masonry. Developers are encouraged to test the feature, explore its capabilities, and provide feedback on their experiences. This collaborative approach aims to refine the feature and ensure it meets the needs of the web development community.

<pFor more detailed information and updates on CSS Masonry, developers can refer to the official Chrome Developers blog and the MDN Web Docs.

CSS Masonry represents a significant advancement in web layout capabilities, offering a native solution for creating dynamic and responsive layouts with varying item sizes. Its introduction in Chrome and Edge provides developers with the tools to build more efficient and maintainable designs. As the feature continues to evolve, staying informed and engaged with the development process will be crucial for leveraging its full potential in future projects.

<pBy embracing CSS Masonry, developers can enhance the visual appeal and functionality of their websites, providing users with a more engaging and seamless browsing experience. As browser support expands and the feature matures, it is expected to become a standard tool in the web development toolkit.