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.
81K Impressions2 Comments