# Day 71: the masonry keyword

DevFeed: [Day 71: the masonry keyword](<https://devfeed.tech/articles/day-71-the-masonry-keyword-52267.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2023/100daysof-day71>)

Author: Manuel Matuzović

Published: 2023-01-02T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović - Blog](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [layout](<https://devfeed.tech/topics/layout.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser-support](<https://devfeed.tech/tags/browser-support.md>), [css](<https://devfeed.tech/tags/css.md>), [css-grid](<https://devfeed.tech/tags/css-grid.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [layout](<https://devfeed.tech/tags/layout.md>), [tabbing](<https://devfeed.tech/tags/tabbing.md>), [test](<https://devfeed.tech/tags/test.md>)

## AI overview

A concise guide to using the CSS masonry keyword to create masonry grid layouts. It explains how to apply the keyword to either grid axis, warns about accessibility issues caused by packing order, and notes that browser support is currently limited to Firefox behind a flag.

## Source excerpt

The masonry keyword allows you to create masonry grid layouts. If you want to create a masonry layout, all you have to do is turn one of the grid axes into a masonry axis using the masonry keyword. <ol> <li> <a href="/blog/2023/100daysof-day70/"> Day 70: the defined pseudo-class </a> </li> <li> <a href="/blog/2022/100daysof-day69/"> Day 69: width in container queries </a> </li> <li> <a href="/blog/2022/100daysof-day68/"> Day 68: cascade layers and browser support </a> </li> ... </ol> ol { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-template-rows: masonry; } This simple layout turns into... ...this "so much better" layout. You can also turn the other axis into the masonry axis. ol { display: grid; gap: 1rem; grid-template-columns: masonry; grid-template-rows: repeat(auto-fill, 6rem); } Accessibility By default, the packing algorithm puts items into the column with the most space. This may cause a disconnect between DOM and tabbing order, which can be an issue for keyboard and screen reader users. Test your masonry grids sufficiently. Browser support Why am I showing screenshots instead of rendering the result directly? Well, because Firefox is the only browser that supports the keyword at the moment and the feature is still behind a flag. You can enable it by visiting about:config and setting layout.css.grid-template-masonry-value.enabled to true. Can you use it today? Yeah, why not?! Most users will still get a grid, it's just not a masonry layout. My blog doesn't support comments yet, but you can reply via blog@matuzo.at.