CSS Masonry Layouts: Three Competing Proposals for Native Browser Support
By
[email protected] (Gabriel Shoyombo)
Soggy bottom. Skim the top, leave the rest on the tray.
Summary
This article explores the ongoing debate in the CSS community about how to implement masonry-style layouts (like Pinterest's grid) natively in CSS. It covers three competing proposals: extending the existing CSS Grid specification, creating a standalone masonry module, and Apple WebKit's "Item Flow" proposal which merges elements of both. The article examines the technical arguments, use cases, and implications for web developers of each approach.
Key quotes
· 3 pulledYou've got a Pinterest-style layout to build, but you're tired of JavaScript. Could CSS finally help?
In one corner is a proposal that extends the existing CSS Grid specification. In the other corner is a second proposal that sets up masonry as a standalone module.
Now, there are three proposals with Apple WebKit's 'Item Flow' as the third option. The first two sides make strong points, and the third one merges them into one.
You might also wanna read
CSS Grid Lanes: New Feature for Masonry Layouts Now Available in Safari Technology Preview
The article introduces CSS Grid Lanes, a new CSS feature for creating masonry layouts on the web. It explains that this technology has been
webkit.org·5mo ago
Safari Technology Preview 234 Introduces CSS Grid Lanes for Masonry Layouts
Safari Technology Preview 234 introduces CSS Grid Lanes, a new CSS Grid feature that enables masonry-style layouts. This allows content to b
webkit.org·4mo ago
Examining CSS Layout Complexity and the Case for Constraint-Based Systems
The article discusses the complexity and challenges of CSS layout systems, questioning whether CSS should be fundamentally rethought as a co
CSS Grid Lanes: Current Browser Support and Implementation Guide
The article discusses the upcoming CSS Grid Lanes feature, explaining its current browser support status and providing practical guidance fo
webkit.org·4mo ago
CSS Subgrid Tutorial: Extending Grid Layouts Through Nested Elements
This article is a comprehensive tutorial on CSS Subgrid, a newer addition to CSS Grid layout that allows deeply-nested elements to participa
joshwcomeau.com·6mo ago