CSS Grid Lanes introduces a new layout system with two alignment axes: the grid axis (along which lanes are laid out) and the stacking axis (along which items stack within a lane). Grid axis alignment mirrors standard CSS Grid behavior using justify-* for horizontal and align-* for vertical alignment, with -content, -items, and -self suffixes controlling layout-level vs. item-level alignment. Stacking axis alignment is more novel — it lets items fill leftover space created by spanning items or ragged lane endings using properties like align-items: stretch. The feature is still being implemented in Chromium and Safari. The author works on Microsoft Edge and notes alignment support is nearly complete in Chromium.

6m read timeFrom patrickbrosset.com
Post cover image
Table of contents
Two axes of alignmentGrid axis alignmentStacking axis alignment
81K Impressions2 Comments