CSS Grid Layout Module Level 2: Masonry Layout
CSS Grid Layout Module Level 2: Masonry Layout êŽë š
UPDATE 2020.10.22
Masonry Layout founds its home in the CSS Grid Module Level 3 Draft Spec!
A long requested CSS feature is to be able to create a âMasonry Layoutâ using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately thatâs not the real deal.
đ€ Masonry Layout?
Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesnât have fixed height rows. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
It became easy to implement thanks to the Masonry JavaScript Library.
Thankfully discussions to natively implement Masonry in CSS havenât stopped and back in January (w3c/csswg-drafts) it kinda settled on this syntax:
.masonry {
display: grid;
grid-gap: 1em;
grid: masonry / repeat(auto-fit, minmax(20em, 1fr));
}
âïž
Thatâs grid-template-rows being set to masonry there, and grid-template-columns to the already familiar repeat(auto-fit, minmax(20em, 1fr))
Knowing that Tab Atkins â author of CSS Grid Layout Level 1 â responded with Iâm liking this quite a bit! was a good sign. Whatâs even better is that Firefox Nightly (version 77a1) has implemented it by now, behind a flag.
đšâđŹ
Do note that this Masonry addition is still a proposal and is considered to be highly experimental at the time of writing. The syntax is still being discussed upon and is NOT final at all. Heck, you canât even find a mention of Masonry in the CSS Grid Module Level 2 Draft!
To enable the experimental Masonry implementation in Firefox Nightly go to about:config and set layout.css.grid-template-masonry-value.enabled to true.
Once enabled the following pen should show a nice Masonry Layout:
Yes, Iâm really excited about this one ⊠letâs hope it sticks!