Alignment in CSS Grid Lanes

Last week, at CSS Day, I presented on the topic of CSS Grid Lanes, an exciting new CSS layout feature coming to the web. One part, which I didn't talk about during the presentation, is how alignment works in CSS Grid Lanes. The reason I didn't talk about it is that alignment is still being implemented in Chromium, and after some quick testing, I believe it's also not fully implemented in Safari. In this article, let's quickly go over how alignment will eventually work in CSS Grid Lanes. Two axes of alignment Like in other layout systems, there are two axes to consider when aligning items in Grid Lanes, and the way we refer to them isn't very intuitive, at least to me, so let's go over them quickly: The grid axis That's the axis along which the lanes are laid out. In a column-orientation grid lanes layout (and assuming a left-to-right, top-to-bottom writing mode), this axis is horizontal. The stacking axis That's the axis along which the items are stacked within a lane. In a…