{
    "slug": "css_layout",
    "term": "CSS Flexbox & Grid",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "Flexbox handles one-dimensional layouts (row or column); Grid handles two-dimensional layouts — together they replace float and table hacks.",
    "long": "Flexbox (display: flex) aligns items along a main axis (row/column). Key properties: flex-direction, justify-content (main axis alignment: space-between, center), align-items (cross axis), gap, flex-grow/shrink/basis. Ideal for: navigation bars, centering, distributing items in a row, component-level layout. CSS Grid (display: grid) creates a two-dimensional coordinate system. Key properties: grid-template-columns (e.g. repeat(3, 1fr)), grid-template-rows, gap, grid-column/row span, grid-template-areas. Ideal for: page layout, card grids, complex asymmetric layouts. They compose: a grid container can have flex items inside cells. Use grid-template-areas for named semantic layout regions. Container queries (@container) allow grid/flex behaviour to respond to the parent element's size rather than the viewport.",
    "aliases": [
        "CSS Flexbox",
        "CSS Grid",
        "CSS layout models"
    ],
    "tags": [
        "frontend",
        "css",
        "layout"
    ],
    "misconception": "Flexbox and CSS Grid are interchangeable layout systems. Flexbox is one-dimensional — it distributes items along a single axis. Grid is two-dimensional — it places items in rows and columns simultaneously. Use Flexbox for component-level alignment and Grid for page-level layout.",
    "why_it_matters": "Modern CSS layout (Flexbox, Grid) solves alignment and distribution problems that required hacks in the float era — misusing floats or absolute positioning for layout creates fragile, hard-to-maintain stylesheets.",
    "common_mistakes": [
        "Using float for layout instead of Flexbox or Grid — floats need clearfix hacks and break document flow.",
        "Using absolute positioning for layout that should be flexbox — elements become unresponsive to content changes.",
        "Not understanding Flexbox axis direction — confusing main axis and cross axis leads to unexpected alignment.",
        "Using table-based layout — semantically wrong and inflexible."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "css_cascade",
        "css_custom_properties",
        "web_performance"
    ],
    "prerequisites": [
        "css_cascade",
        "responsive_design_patterns",
        "css_grid_subgrid"
    ],
    "refs": [
        "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
        "https://css-tricks.com/snippets/css/complete-guide-grid/"
    ],
    "bad_code": "/* Float-based layout — requires clearfix, fragile:\n.sidebar { float: left; width: 25%; }\n.content { float: left; width: 75%; }\n.container::after { content: ''; display: table; clear: both; } /* Clearfix hack */\n\n/* Flexbox — clean, responsive:\n.container { display: flex; gap: 1rem; }\n.sidebar { flex: 0 0 25%; }\n.content { flex: 1; }",
    "good_code": "/* Flexbox — single axis, component level */\n.nav {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: space-between;\n}\n\n/* Grid — two-dimensional, page layout */\n.page {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    'sidebar header'\n    'sidebar main'\n    'sidebar footer';\n  min-height: 100vh;\n}\n.sidebar { grid-area: sidebar; }\n.main    { grid-area: main; }\n\n/* Responsive grid — no media queries needed */\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.5rem;\n}",
    "quick_fix": "Use CSS Grid for two-dimensional layouts (rows AND columns); use Flexbox for one-dimensional alignment (row OR column); stop using floats and clearfix for layout",
    "severity": "low",
    "effort": "medium",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_layout",
        "html_url": "https://codeclaritylab.com/glossary/css_layout",
        "json_url": "https://codeclaritylab.com/glossary/css_layout.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": "[CSS Flexbox & Grid](https://codeclaritylab.com/glossary/css_layout) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_layout"
            }
        }
    }
}