api: YAML JSON TOON Database
version: 1.0.0
format: yaml
dataset:
  id: 1542
  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
  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.
  category: Web Technologies
  category_slug: web-technologies
  tags: web-technologies,css layout recipes,reference,engineering
  view_count: 2
  created_at: 1791798640
  updated_at: 1791798640
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.