Progressively Enhancing Grid Lanes
The more I think about it, the less sympathy I have for Grid Lanes. You create a DOM order that you think makes sense, then you mess it up with CSS. Then, if you're aware of the problem, you fix it again with CSS. Finally, you have a patched-up layout that may have created other issues you can't address.
I'm looking forward to Chrome's, Firefox's, and Safari's next moves. Until then, to sum it up, my slightly adjusted recommendations are:
- Always test your Grid Lanes with the keyboard or a screen reader across different screen sizes.
- If you find a mismatch between the DOM and the visual order, increase the
flow-tolerancevalue. You may have to use a high value or eveninfinite.- As soon as it's available and supports Grid Lanes, try using
reading-flowinstead.- If that doesn't work, consider using a regular grid.
Some good thoughts and examples here to help with accessibility should you choose to use CSS Grid Lanes.