--- title: "Day 71: the masonry keyword" url: https://daily.dev/posts/day-71-the-masonry-keyword-mi5mxgt86 source_url: https://www.matuzo.at/blog/2023/100daysof-day71 type: article source: "Manuel Matuzović" published: 2026-06-22T14:42:40.928Z updated: 2026-06-23T14:46:18.226Z tags: ["css", "accessibility"] reading_time: 2 upvotes: 0 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Day 71: the masonry keyword **[Manuel Matuzović](https://daily.dev/sources/matuzo)** · 2 min read · 0 upvotes · 0 comments ## Summary The CSS `masonry` keyword enables masonry grid layouts by setting either `grid-template-rows` or `grid-template-columns` to `masonry`, turning that axis into a masonry axis. Currently only supported in Firefox behind a flag (`layout.css.grid-template-masonry-value.enabled`). An accessibility note warns that the packing algorithm may disrupt DOM and tab order, which can affect keyboard and screen reader users. Despite limited browser support, using it today is viable since unsupported browsers will fall back to a regular grid. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Masonry Layout is Now grid-lanes](https://daily.dev/posts/masonry-layout-is-now-grid-lanes-oyfscxlvr) · CSS-Tricks · 102 upvotes · 3 comments - [Intro to Masonry Layout](https://daily.dev/posts/intro-to-masonry-layout-gosjaibqo) · Scott Logic · 3 upvotes · 0 comments - [Masonry \(with Animation\) in CSS – Master.dev Blog](https://daily.dev/posts/masonry-with-animation-in-css-master-dev-blog-ek1lsjdpl) · Frontend Masters · 14 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/day-71-the-masonry-keyword-mi5mxgt86)