A naukri.com initiative
Smashingmagazine
4w
124
Image Credit: Smashingmagazine
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?
- The article discusses the possibility of using CSS for creating a Pinterest-style masonry layout without relying on JavaScript.
- While CSS Grid offers an experimental masonry value for grid-template-rows, it comes with limited browser support and usability issues.
- CSS lacks native masonry support, leading developers to resort to hacks or JavaScript libraries like Masonry.js.
- Developers have expressed concerns about the complexity and limitations of implementing masonry with CSS Grid.
- The article introduces a new proposal by the Apple WebKit team that merges grid, masonry, and flexbox concepts into a unified system shorthand called Item Flow.
- The debate revolves around whether CSS Grid should evolve to handle masonry, or a new standalone module should be introduced, or the Item Flow approach should be adopted.
- A CSS Grid hack involving JavaScript is presented to mimic a masonry layout, but it requires constant calculations and may result in lag on complex pages.
- The article explores the limitations of extending CSS Grid for masonry, such as potential spec complications and browser compatibility issues.
- The proposal for a standalone display: masonry module is discussed as a potential solution for achieving a seamless masonry layout.
- Item Flow is showcased as a novel concept that aims to unify Grid, Flexbox, and masonry while introducing new properties to enhance layouts.
- Each approach mentioned has its trade-offs, with Item Flow being seen as an elegant and versatile option for the future of masonry layouts.
Read Full Article
7 Likes
For uninterrupted reading, download the app