Webkit Unveils Grid Lanes: A Game-Changer for CSS Layouts, with Safari Leading Support

Webkit has announced a significant advancement in CSS layout capabilities with the introduction of Grid Lanes, a new display property poised to revolutionize web design. Detailed in their newly launched “Field Guide to Grid Lanes” website, this feature directly addresses the long-standing demand for native masonry layouts, akin to Pinterest’s dynamic content arrangement. Grid Lanes allows developers to efficiently organize content of varying sizes while maintaining left-to-right reading flow and optimal space utilization. This innovative approach supports dynamic re-adjustment and re-ordering of elements, making complex, responsive layouts significantly simpler to implement with minimal CSS. Notably, Safari 26.4 and higher is currently the first browser to offer full support for Grid Lanes, while Chrome, Edge, and Firefox have the functionality available behind experimental flags, indicating an imminent wider adoption across the web.

Beyond Grid Lanes, Safari 27’s beta version, along with further updates in the Safari Technical Preview, introduces a suite of developer-centric improvements. Among these are the long-awaited CSS customization for native <select> elements via appearance: base-select, eliminating the need for complex JavaScript hacks. The new ::heading pseudo-class simplifies targeting all HTML heading levels (H1 to H6) with a single selector. Other notable enhancements include support for sizes="auto" for responsive image rendering combined with loading="lazy", improved scroll anchoring, and expanded capabilities for Web Assembly and Web GPU. While the Temporal API is not yet fully integrated into Safari 27, its presence under an experimental flag in the Technical Preview suggests eventual arrival. These updates underscore Safari’s renewed commitment to advancing web standards and empowering developers with modern, efficient tools.