Sustainable.devBETA Menu

Posted to Blog on November 15, 2020


Native CSS masonry layout in CSS Grid

There is now a draft for level 3 of the CSS Grid specification. In it, there is a proposed method of using CSS grid to create ‘proper’ masonry layouts – with no need for external Javascript libraries.

Wait, can’t we create masonry layouts with CSS already?

Well, yes, no; sort of. You can certainly create gridded layouts, but correctly positioning items, both within a natural flow of content whilst maintaining the masonry-style layout where content fills in the gaps, is not very easy. Nothing with pure CSS really comes close enough to what is possible with Javascript – such as masonry.js by David DeSandro.

The issue with javscript-based masonry layouts

Using Javascript to control the layout, especially with lots of items, can be both power-intensive as well as generally slow. Plus, of course, you have to load that Javascript library in the first place – which is also less than ideal if you’re aiming for a very slim, lightweight website.

The new CSS Grid spec for masonry

Whilst this is still early days for this particular area of grid layout, it is possible to begin messing around with it. If you get yourself a copy of Firefox nightly, you just need to enable the layout.css.grid-template-masonry-value.enabled flag and you’re away.

How to use native CSS masonry within grid layout

To start using masonry with CSS grid, you need to set one of your axis to masonry. Your other axis can then be used for rows or columns as you would normally.

.masonry-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

That’s all you need to get a basic masonry layout with CSS Grid. Check out this simple example on codepen.io. Remember, you must be viewing in Firefox nightly to see it working.

You are able to use a plethora of the other grid layout options along with masonry to adjust the alignment and some changes to the positioning of individual items within the grid.

Fallback behaviour

Thankfully, as CSS grid is well supported amongst browsers now, the fallback will at least be a more standard grid layout, albeit with some vertical gaps in between your grid items. To make this better, you can make use of the CSS supports functionality to test if a browser supports masonry with CSS grid.

@supports (grid-template-rows: masonry) {
  .masonry-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: masonry;
  }
}

If you need to keep a masonry grid layout across all browsers, you could use the CSS.supports API in order to use a javascript version on those browsers that didn’t support the CSS version.

 if(CSS.supports('grid-template-rows', 'masonry')){
  console.log('You have css grid masonry');
 } else {
  console.log('You need javascript-based masonry');
 }

A word on accessibility

This article is certainly more about the benefits of a masonry layout potentially not needing Javascript – in order to make a website more performant. It is not about creating the most accessible website. Masonry layouts, by design, aren’t all that accessible. This is due to the fact that they can visually change the order of objects in the document. Navigate a masonry grid layout with a keyboard, or when using a screen reader, is very likely to cause confusion as to what the order actually is. We’re not accessibility experts, but we would suggest that if you’re creating a website that is looking to cater to all audiences, then perhaps avoid using a masonry grid layout in your designs.

Wrapping up

Native CSS masonry layouts with CSS grid could be coming to the widespread internet pretty soon. But not quite yet. While the specification is still in draft, you can help to make a difference as to how the spec is improved. Have a go with it, test it out using Firefox nightly, replacing a Javascript version of masonry in a test project. If you come across some issues, let the CSSWG know by raising an issue on Github.

Find this resource useful?

We hope so. We want everyone to be able to benefit from articles like this one. That is why we need your help.

Our resources are discovered, researched and written by ourselves or by volunteer contributors in our spare time. Please consider supporting our efforts in creating more content like this on ko-fi.com