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.

2m read timeFrom matuzo.at
Post cover image
Table of contents
AccessibilityBrowser support