Elika J. Etemad

Contents Item Direction Item Wrap Item Pack Item slack The Overall Plan What do you think? CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want. One of those things is a popular layout pattern called “masonry” or “waterfall,” which currently still requires a Javascript library to accomplish. Masonry layouts in CSS feature was first proposed by Mozilla and implemented in Firefox behind a flag in 2020.

Contents Design Principles Simplicity | Learnability Extensibility Summary Design by committee Back in April 2024, we wrote about “Masonry” layout in CSS and the ongoing work to bring this feature to browsers. In it, we described a debate about whether or not the full power of CSS Grid (subgrid, spanning, explicit placement, and all the options for track sizing) should be combined with the packed layout currently accomplished with tools like masonry.js.

1. Introduction CSS defines a finite set of parameters, called properties, that direct the rendering of a document. Each property has a name (e.g., color, font-size, or border-style), a value space (e.g., <color>, <length-percentage>, [ solid | dashed | dotted | … ]), and a defined behavior on the rendering of the document.