{
    "api": "YAML JSON TOON Database",
    "version": "1.0.0",
    "format": "json",
    "dataset": {
        "id": 1007,
        "slug": "css-layout-recipes",
        "title": "Responsive CSS Layout Recipes",
        "description": "Small CSS patterns for resilient columns, readable text, scrollable data, and mobile controls.",
        "summary": "Small CSS patterns for resilient columns, readable text, scrollable data, and mobile controls. Each row includes a practical application and a failure to check before using it.",
        "use_when": [
            "Fix page overflow without hiding the offending content.",
            "Build a responsive reference or documentation page."
        ],
        "caveats": [
            "Snippets need to be adapted to their containing layout.",
            "Do not use overflow hidden to conceal inaccessible data."
        ],
        "related": [
            "web-accessibility-patterns"
        ],
        "category": "Web Technologies",
        "category_slug": "web-technologies",
        "tags": "web-technologies,css layout recipes,reference,engineering",
        "view_count": 0,
        "created_at": 1791798640,
        "updated_at": 1791798640,
        "reviewed_at": "2026-10-12",
        "sources": [
            {
                "title": "MDN CSS grid layout",
                "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"
            },
            {
                "title": "W3C reflow guidance",
                "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html"
            }
        ],
        "reading": [
            "keyboard-accessible-search-and-data-tables"
        ],
        "provenance": "Original editorial reference notes by YJTOON, informed by the linked primary documentation. External specifications retain their own licenses.",
        "entry_count": 10,
        "fields": [
            {
                "section": "data",
                "field": "task",
                "type": "string",
                "example": "Bounded content"
            },
            {
                "section": "data",
                "field": "css",
                "type": "string",
                "example": "width: min(100% - 32px, 1200px); margin-inline:…"
            },
            {
                "section": "data",
                "field": "reason",
                "type": "string",
                "example": "Use a shared gutter with a maximum reading canv…"
            },
            {
                "section": "data",
                "field": "check",
                "type": "string",
                "example": "Test at 320 CSS pixels and with large text."
            }
        ]
    },
    "data": [
        {
            "task": "Bounded content",
            "css": "width: min(100% - 32px, 1200px); margin-inline: auto",
            "reason": "Use a shared gutter with a maximum reading canvas.",
            "check": "Test at 320 CSS pixels and with large text."
        },
        {
            "task": "Flexible two-column grid",
            "css": "display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)",
            "reason": "Allow content tracks to shrink below intrinsic widths.",
            "check": "Collapse when the content becomes cramped."
        },
        {
            "task": "Shrinkable flex child",
            "css": "min-width: 0",
            "reason": "Allow a long label to fit inside a flex row.",
            "check": "Without it, intrinsic width may force page overflow."
        },
        {
            "task": "Readable prose",
            "css": "max-width: 70ch; line-height: 1.7",
            "reason": "Constrain line length while keeping vertical rhythm.",
            "check": "Actual character widths vary with the font."
        },
        {
            "task": "Wide reference table",
            "css": "overflow-x: auto; max-width: 100%",
            "reason": "Keep horizontal scrolling inside the table region.",
            "check": "Make the region keyboard reachable and label it."
        },
        {
            "task": "Touch target",
            "css": "min-height: 44px; min-width: 44px",
            "reason": "Provide a practical touch area for controls.",
            "check": "WCAG target-size criteria have additional details and exceptions."
        },
        {
            "task": "Long URL",
            "css": "overflow-wrap: anywhere",
            "reason": "Permit unbroken source URLs to wrap.",
            "check": "Keep code blocks scrollable instead of breaking syntax."
        },
        {
            "task": "Sticky sidebar",
            "css": "position: sticky; top: 96px; align-self: start",
            "reason": "Keep reference navigation near the data.",
            "check": "Disable or bound it when the viewport is short."
        },
        {
            "task": "Reduced motion",
            "css": "@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }",
            "reason": "Avoid unnecessary animated scrolling.",
            "check": "Controls must still communicate state."
        },
        {
            "task": "Responsive media",
            "css": "width: 100%; height: auto; aspect-ratio: 16 / 9",
            "reason": "Reserve space for a visual while preserving proportions.",
            "check": "Do not assign a conflicting fixed height."
        }
    ]
}