{
    "slug": "responsive_design_patterns",
    "term": "Responsive Design Patterns",
    "category": "mobile",
    "difficulty": "intermediate",
    "short": "Layout patterns for adapting UI across screen sizes — fluid grids, the column drop pattern, layout shifter, mostly fluid, and off-canvas navigation.",
    "long": "Common responsive patterns: Mostly Fluid (multi-column grid collapses to single column on small screens), Column Drop (columns stack vertically as viewport narrows), Layout Shifter (different layouts at different breakpoints — not just stacking), Tiny Tweaks (minor adjustments — font size, padding — at each breakpoint), Off Canvas (navigation hidden off-screen on mobile, revealed by tap). CSS Grid and Flexbox handle most patterns without media queries using auto-fill, minmax(), and flex-wrap. Container queries (CSS 2023) enable components to respond to their container size, not the viewport.",
    "aliases": [
        "responsive layout",
        "column drop",
        "off-canvas",
        "container queries"
    ],
    "tags": [
        "mobile",
        "css",
        "frontend"
    ],
    "misconception": "Mobile-first means building the mobile version first and adding features for desktop — mobile-first in CSS means starting with styles for the smallest screen and using min-width media queries to add complexity, which produces leaner CSS.",
    "why_it_matters": "A desktop-first approach where everything is overridden with max-width queries produces bloated CSS that sends desktop styles to mobile devices — mobile-first produces smaller stylesheets and faster mobile rendering.",
    "common_mistakes": [
        "Desktop-first with max-width overrides — complex, bloated CSS for mobile.",
        "Fixed pixel breakpoints — use content breakpoints (where the design breaks) not device sizes.",
        "Hiding content on mobile with display:none — content is still downloaded.",
        "Not testing intermediate viewport sizes — most responsive bugs occur between defined breakpoints."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "css_grid_subgrid",
        "mobile_performance",
        "css_logical_properties",
        "progressive_enhancement"
    ],
    "prerequisites": [
        "css_layout",
        "css_grid_subgrid",
        "web_performance"
    ],
    "refs": [
        "https://web.dev/articles/responsive-web-design-basics"
    ],
    "bad_code": "/* Desktop-first — overrides everywhere for mobile: */\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }\n@media (max-width: 768px) { .grid { grid-template-columns: 1fr; gap: 1rem; } }\n@media (max-width: 480px) { .grid { gap: 0.5rem; } }\n/* Mobile gets: all desktop CSS + overrides = more code */",
    "good_code": "/* Mobile-first — progressive enhancement: */\n.grid { display: grid; gap: 0.5rem; }\n@media (min-width: 480px) { .grid { gap: 1rem; } }\n@media (min-width: 768px) {\n    .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }\n}\n/* Mobile gets only what it needs */\n\n/* Container queries — component-driven responsiveness: */\n@container (min-width: 400px) {\n    .card { display: flex; flex-direction: row; }\n}",
    "quick_fix": "Use CSS Grid and Flexbox with fluid units (%, vw, clamp()) instead of fixed pixel widths; test at 320px, 768px, and 1440px; use CSS container queries for component-level responsiveness",
    "severity": "medium",
    "effort": "medium",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/responsive_design_patterns",
        "html_url": "https://codeclaritylab.com/glossary/responsive_design_patterns",
        "json_url": "https://codeclaritylab.com/glossary/responsive_design_patterns.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Responsive Design Patterns](https://codeclaritylab.com/glossary/responsive_design_patterns) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/responsive_design_patterns"
            }
        }
    }
}