started · updated
CSS Grid features expand with Subgrid and :has() support
Recent developments in CSS Grid technology are expanding layout capabilities for web developers. The subgrid value for grid-template-rows and grid-template-columns is now supported in Firefox and Safari 16+, with Chrome expected to follow. This feature allows nested grids to inherit track definitions from their parent grids, facilitating better alignment across complex layouts.
Additionally, the :has() pseudo-class has arrived in the latest Safari release, with Chrome support expected via a flag in upcoming releases. This selector enables developers to style parent elements or siblings based on the state of a child, such as animating grid tracks when a user hovers over a specific item.
Furthermore, CSS Grid Lanes is being introduced to facilitate masonry or waterfall layouts. This extension allows for layouts using either columns or rows to pack mixed aspect ratio content neatly. Browser support for Grid Lanes varies, with Safari showing support in version 26.4 and later.
Entities
Claims
What the coverage asserts, and how many sources carry each claim.
- [○ 1 SOURCE] CSS Grid Lanes extends CSS Grid to create layouts with columns or rows (not both), allowing mixed aspect ratio content to pack neatly (also known as “masonry” or “waterfall” layout). caniuse.com
- [○ 1 SOURCE] The latest Safari (proper) release has just shipped with support css-irl.info
- [○ 1 SOURCE] The ability to animate grid tracks (grid-template-rows and grid-template-columns) is actually written into the CSS Grid specification, and has been supported in Firefox since 2019. css-irl.info
- [○ 1 SOURCE] The subgrid value for grid-template-rows and grid-template-columns is now supported in Firefox and Safari 16+ 12daysofweb.dev