{
    "api": "YAML JSON TOON Database",
    "version": "1.0.0",
    "format": "json",
    "dataset": {
        "id": 15,
        "slug": "css-layout-systems",
        "title": "CSS Layout Systems Reference",
        "description": "Modern CSS layout systems: Flexbox, CSS Grid, Multi-column, Positioning, and Container Queries with specifications and use cases.",
        "summary": "CSS layout systems with their specification, axis, use case and browser support: Flexbox, CSS Grid, float-based layout, positioning, multi-column and container queries, extended with subgrid and table layout.",
        "use_when": [
            "You need to choose the layout mechanism for a component or a page.",
            "You are modernizing legacy float-based CSS."
        ],
        "caveats": [
            "Subgrid support reached all major browsers in 2023; older browsers need a fallback.",
            "Float-based layout is legacy; floats are still correct for wrapping text around an image."
        ],
        "related": [
            "css-preprocessors-modern-css",
            "browser-web-apis-reference",
            "javascript-frameworks-comparison"
        ],
        "category": "Web Technologies",
        "category_slug": "web-technologies",
        "tags": "css,layout,web,frontend,responsive",
        "view_count": 0,
        "created_at": 1777673262,
        "updated_at": 1777673262,
        "entry_count": 8,
        "fields": [
            {
                "section": "systems",
                "field": "name",
                "type": "string",
                "example": "Flexbox"
            },
            {
                "section": "systems",
                "field": "spec",
                "type": "string",
                "example": "W3C CSS3"
            },
            {
                "section": "systems",
                "field": "axis",
                "type": "string",
                "example": "One-dimensional"
            },
            {
                "section": "systems",
                "field": "use_case",
                "type": "string",
                "example": "Navigation bars, centering, equal-height columns"
            },
            {
                "section": "systems",
                "field": "browser_support",
                "type": "string",
                "example": "All modern browsers"
            }
        ]
    },
    "data": {
        "systems": [
            {
                "name": "Flexbox",
                "spec": "W3C CSS3",
                "axis": "One-dimensional",
                "use_case": "Navigation bars, centering, equal-height columns",
                "browser_support": "All modern browsers"
            },
            {
                "name": "CSS Grid",
                "spec": "W3C CSS3",
                "axis": "Two-dimensional",
                "use_case": "Page layouts, card grids, dashboards",
                "browser_support": "All modern browsers"
            },
            {
                "name": "Float-based Layout",
                "spec": "CSS2.1",
                "axis": "Legacy",
                "use_case": "Text wrapping around images (deprecated for layout)",
                "browser_support": "All browsers"
            },
            {
                "name": "Positioning",
                "spec": "CSS2",
                "axis": "Absolute/Relative",
                "use_case": "Overlays, modals, fixed headers",
                "browser_support": "All browsers"
            },
            {
                "name": "Multi-column",
                "spec": "W3C CSS3",
                "axis": "One-dimensional",
                "use_case": "Magazine-style text layouts",
                "browser_support": "All modern browsers"
            },
            {
                "name": "Container Queries",
                "spec": "W3C CSS Containment Level 3",
                "axis": "One-dimensional",
                "use_case": "Component-level responsive design",
                "browser_support": "Chrome 105+, Safari 16+, Firefox 110+"
            },
            {
                "name": "Subgrid",
                "spec": "CSS Grid Level 2",
                "axis": "Two-dimensional",
                "use_case": "Aligning the contents of nested grids to the parent grid's tracks",
                "browser_support": "All modern browsers (since 2023)"
            },
            {
                "name": "Table Layout",
                "spec": "CSS 2.1",
                "axis": "Two-dimensional",
                "use_case": "Tabular data; auto or fixed column sizing",
                "browser_support": "All browsers"
            }
        ]
    }
}