Safari Technology Preview 234 Introduces CSS Grid Lanes for Masonry Layouts
By
feross
4mo ago· 6 min readenNews
100/100
Golden Brown
Bagelometer↗
Toasted golden, schmeared with insight. Top of the rack.
Score100TypenewsSentimentpositive
Summary
Safari Technology Preview 234 introduces CSS Grid Lanes, a new CSS Grid feature that enables masonry-style layouts. This allows content to be aligned in either columns or rows (but not both), enabling content of various aspect ratios to pack together efficiently without artificial truncation. The feature represents a significant advancement in CSS layout capabilities for web developers.
Key quotes
· 3 pulledCSS Grid Lanes adds a whole new capability to CSS Grid. It lets you line up content in either columns or rows — and not both.
This layout pattern allows content of various aspect ratios to pack together. No longer do you need to truncate content artificially to make it fit.
You might have heard recently that Safari Technology Preview 234 landed the final plan for supporting masonry-style layouts in CSS. It's called Grid Lanes.
You might have heard recently that Safari Technology Preview 234 landed the final plan for supporting masonry-style layouts in CSS.
You might also wanna read
CSS Masonry Layouts: Three Competing Proposals for Native Browser Support
This article explores the ongoing debate in the CSS community about how to implement masonry-style layouts (like Pinterest's grid) natively
Smashing Magazine·1y ago
CSS Masonry Layout: Native Browser Support Eliminates Need for JavaScript Libraries
The article explores the upcoming native CSS Masonry layout feature, which will eliminate the need for JavaScript libraries to create masonr
Smashing Magazine·6mo ago