I'm very excited about this feature, although it's not yet widely supported.
Making masonry grids is so cool! It's that kind of elemental table effect, where blocks with different sizes can stack. (Like Tetris!)
Now there is the
masonry option for
Note: This is unfortunately far from being well supported, so do note that!
The end result can look like this:
Enabling masonry support permalink
Currently, we can try out the feature in Firefox, but we do need to enable it first.
Open up Firefox and type the following in the address bar:
layout.css.grid-template-masonry-value.enabled and set this to true.
Now we can enjoy CSS native grids!
Creating our masonry grid permalink
To create the grid, we generally just use CSS
Let's start by creating a basic structure:
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
Here you can add some images of all kinds of shapes that will become masonry's magic to fix.
Now let's add the magic in CSS.
grid-template-columns: repeat(4, 1fr);
And yes, that's it! All we need to create masonry layouts.
In browser that doesn't support it, we get the following result:
However, in browsers that do support it, we see the following:
Wow, right? It just auto-filled where each image should go, and it looks amazing.
I'm super amped for this feature to become widely supported.
For those that use Firefox, enable the flag and check it out on this Codepen.
Browser support permalink
Unfortunately, it's really new and therefore not supported. We have to enable a flag in Firefox to see it in action.
To enable in Firefox, set the following flag to true.