How can CSS columns provide a masonry-like layout, and what are the ordering trade-offs?
Instruction: Build a multicolumn fallback for unequal-height cards. Explain why ordinary grid-auto-rows does not produce masonry, and describe source, visual, and keyboard order.
Updated
Official answer available
Read the opening below, then unlock the full answer and practical guidance.
Ordinary Grid with grid-auto-rows: auto still uses shared row tracks; it does not automatically pack each item below the shortest column. A broadly usable CSS-only masonry-like fallback is multicolumn layout. It flows content down columns rather than implementing shortest-column placement.
<style> .cards { columns: 14rem; column-gap: 1rem; } .card { break-inside: avoid; margin: 0 0 1rem; padding: 1rem; border: 1px solid #777; } .card p { margin: 0; } </style> <section...