The debate around implementing masonry layouts on the web has been ongoing, with various proposals being put forward. Recently, the WebKit team proposed adding masonry as part of the CSS Grid Layout specification. However, the Chrome team has expressed concerns about this approach and instead suggested defining masonry outside the grid specification.

The Case for a Separate Masonry Specification

The Chrome team argues that adding masonry to the grid specification is problematic for several reasons beyond whether masonry is a grid. By defining masonry outside of the grid specification, it would still be possible to achieve the same flexibility and functionality as the WebKit proposal without the drawbacks of bundling it with the grid.

Here are some key points in favor of a separate masonry specification:

1. Simpler syntax: Defining masonry using a separate display: masonry property would require less code than the equivalent grid-bundled version. For example, a classic masonry layout with equal-sized columns could be achieved with just a few lines of CSS:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

1. Flexibility in track sizing: A separate masonry specification would still allow for different column widths using grid-type track sizing, just like the WebKit proposal. This means that developers would have the same level of control over the layout as a grid-based solution.

2. Support for spanning columns: There’s no reason why a separate masonry specification couldn’t support content spanning multiple columns. This could be achieved using properties like masonry-track-start and masonry-track-end, similar to how grid items span multiple tracks.

3. Compatibility with other layout features: Defining masonry outside of the grid specification doesn’t prevent it from being used with other layout features like alignment or gaps. Developers would still have access to the same set of tools they’re used to when working with grid layouts.

The Way Forward

The Chrome team’s proposal for a separate masonry specification offers a promising alternative to the WebKit approach. By decoupling masonry from the grid, it would be possible to achieve the same functionality and flexibility while avoiding the potential pitfalls of bundling the two together.

As the debate continues, developers are demanding a way to create masonry layouts on the web. The Chrome team’s proposal is a step in the right direction, and hopefully, we’ll see progress soon.

https://developer.chrome.com/blog/masonry