#vuecember2020 #frontend #css

Native masonry

Also in this year Santa Claus must stow away again numerous gifts on his sled without losing the control. However, he will soon be able to fall back on technical support. In level 3 of the CSS Grid Layout specification a native Masonry implementation is planned. But how can this help with the order on the sled?

What is Masonry?

Masonry has established as a term for a staggered tile look where the contents are arranged in the most space-saving way possible. The natural reading direction from left to right is preserved.

The current state of the art

Let's imagine some nice presents, of course in the browser. We could now simply let them float to make better use of the space. However, there are large gaps and the sled is quickly full. This is anything but perfect.

masonry1.png

There are some CSS based approaches to arrange the elements in a more space-saving way. But these often require a lot of markup and cause some problems. For example, CSS columns can be used to create a multi-column arrangement, but the reading direction is vertical.

css-columns.png

So Santa Claus naturally does not get the suitable gifts in the correct order.

Native Masonry in action

Now we can either use JavaScript libraries or we add the following code:

.sleigh %7B
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-rows: masonry;
%7D  

New is only the value for grid-template-rows, but with great effect:

masonry2.png

The gifts fill the space optimally and also the correct reading direction is maintained. Of course this is also responsive.

Currently Masonry for the CSS Grid is still in the design stage. The current draft can be viewed here.

But in Firefox Nightly Browser there is already the chance to test it. The flagged implementation can be activated as follows:

  • Enter about:config in the address field
  • Search for layout.css.grid-template-masonry-value.enabled in the list
  • Set value to true

Maybe this feature will soon be available in all major browsers. Until then, Santa Claus still has to rely on JavaScript solutions or the Firefox Nightly Build.

Sources: