Responsive Design
css-responsive-design
Code Snippets
CSS Grid Responsive Layout Snippet
A responsive card grid that fills as many columns as fit and never produces an awkward last row is a one-line CSS Grid trick. This snippet covers the canonical `auto-fill` plus `minmax` recipe, the `auto-fit` variant that collapses empty tracks, and a row-spanning variant for masonry-like layouts. No media queries, no JavaScript.
Component-Aware Container Queries
Media queries respond to viewport size, but components do not always live at viewport scale: a card might render in a sidebar at 240px or in a feature row at 800px. Container queries let a component style itself based on its own width. This snippet covers the basic `@container` rule, the size container with named breakpoints, and the style container variant for theming children based on parent state.
CSS Media Query Recipes (Retina, DPI, Color Depth, Aspect Ratio)
Media queries do far more than `min-width`. This snippet collects the recipes you reach for in real projects: viewport breakpoints, high-DPI / retina screens, color-depth and color-gamut gating, user preference queries (`prefers-color-scheme`, `prefers-reduced-motion`), and aspect-ratio plus orientation for video and game UIs. Drop the ones you do not need; keep the rest as a starting point.
Question Banks
CSS Grid and Flexbox Quiz
Four drills on the differences between flexbox and grid, plus the gap, auto-fit, and minmax patterns that show up in real responsive layouts.
CSS Responsive Design and Media Queries Quiz
Three drills on responsive design: classic viewport media queries, modern container queries, and using clamp() for fluid typography that scales between breakpoints.
CSS Theming and Custom Properties Quiz
Three drills on theming with CSS custom properties: declaring a token set, switching themes at runtime, and respecting the OS prefers-color-scheme setting.