CSS Grid: Scrollers, Auto-Grids, Adaptive Layouts
Build horizontal scrollers with grid-auto-flow: column + snap; prevent auto-grid overflow via minmax(min(300px, 100%), 1fr); adapt sidebars using container queries at 500px width.
Horizontal Overflow Scrollers with Grid and Snap
Create touch-friendly horizontal card scrollers using CSS Grid's grid-auto-flow: column to stack items vertically into columns, paired with grid-auto-columns: 300px for uniform width and gap: 1rem. Add overflow-x: scroll to enable scrolling without page reflow. Enhance usability with scroll-snap-type: x mandatory on the container and scroll-snap-align: center on children (* selector via nesting)—snaps cards to center on scroll, eliminating awkward shift-scrolling on desktop. Mandatory snaps aggressively for precise alignment; avoid proximity for scrollers as it allows leeway. Trade-off: Feels like scrolljacking if overused on full sections, but perfect for compact galleries.
Non-Overflowing Auto-Fit Grids
Responsive card grids overflow on narrow viewports when using repeat(auto-fit, minmax(200px, 1fr))—minimums like 400px total force horizontal scroll. Fix by nesting min(): repeat(auto-fit, minmax(min(300px, 100%), 1fr)). Below 300px container width, grids collapse to 100% (full-width single column); above, they expand to 300px min with fr growth. Memory trick: auto-fit/fill → minmax → min(ideal-px, 100%), 1fr. Use CSS var --min-card-size: 300px for reuse. Auto-fit collapses empty tracks (vs. auto-fill's fixed count)—no difference here, but default to fit. Result: Intrinsic, fluid layouts that scale from mobile stack to desktop multi-column without breakpoints.
Adaptive Sidebars via Container Queries
Media queries fail for sidebars that shrink on wide viewports (e.g., narrow sidebar → full-width → narrow again). Use container queries: Set parent container-type: inline-size, then @container (width > 500px) { .promo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } }. Stacks vertically below 500px (narrow contexts); grids to 3 columns above. Declare on closest ancestor (e.g., aside or section). Support is strong outside legacy browsers. Solves viewport-agnostic adaptation—far simpler than breakpoint juggling.
Polish with Scooped Corners and Scroll-Driven Animations
Elevate cards: border-radius: 16px; border-color: white; corner-shape: scoop—scoops corners progressively (falls back to radius). New property; also supports squircle/bevel/inset for ticket-like promos.
Supercharge scrollers: @keyframes scroller { 0%, 100% { opacity: 0.5; scale: 0.5; } 35%, 65% { opacity: 1; scale: 1; } } on snapped children, with animation: scroller linear both; animation-timeline: scroll(x). Fades/scales edge items low-opacity/small, centers active card at full size—driven by horizontal scroll progress, no duration needed. both fills animation ends. Makes scrollers feel premium and satisfying.