Container queries don't exist yet in CSS (as of early 2021), but you can approximate discrete-width snapping behavior using CSS Grid. The technique uses a grid with a fixed first column and `repeat(auto-fill, 90px)` to create columns that appear only when space allows. The key insight is that `repeat()` always renders at least one column, so the first column must be sized as `min-width minus step-size` (e.g., 410px instead of 500px) to get the correct snap points. The result is a wrapper that snaps its child element to 500px, 590px, or 680px depending on available space — mimicking container query behavior for fixed discrete widths.
33 Impressions