When will CSS Grid Lanes arrive?
5 days ago
- #Frontend
- #Web Development
- #CSS
- CSS Grid Lanes is a new tool for creating masonry-style layouts in CSS.
- Current implementations: Safari Technology Preview has finalized syntax; Edge, Chrome, and Firefox are making progress.
- Firefox was first to propose masonry-style layouts in CSS Grid Level 3 (2019-2020).
- Safari picked up the implementation in 2022, enabled by default in Safari Technology Preview 163 (Feb 2023).
- Chrome and Edge experimented with an alternative proposal but are updating to the finalized syntax.
- Developers can start using Grid Lanes with progressive enhancement techniques.
- Option 1: Use a JavaScript polyfill (e.g., Masonry.js) as a fallback for unsupported browsers.
- Option 2: Use alternative CSS layouts like Grid Level 1, Flexbox, or Multicolumn instead of Grid Lanes.
- Option 3: Use Grid Lanes with a CSS fallback (e.g., Grid Level 1) for unsupported browsers.
- Feature queries (@supports) help conditionally apply CSS based on Grid Lanes support.
- Developers can force uniform aspect ratios and truncate text for fallback layouts.
- Progressive enhancement allows using Grid Lanes before full browser support.