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[2]: Fix page overflow without hiding the offending content.,Build a responsive reference or documentation page.
  caveats[2]: Snippets need to be adapted to their containing layout.,Do not use overflow hidden to conceal inaccessible data.
  related[1]: 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[2]{title,url}:
    MDN CSS grid layout,"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"
    W3C reflow guidance,"https://www.w3.org/WAI/WCAG22/Understanding/reflow.html"
  reading[1]: 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[4]{section,field,type,example}:
    data,task,string,Bounded content
    data,css,string,"width: min(100% - 32px, 1200px); margin-inline:…"
    data,reason,string,Use a shared gutter with a maximum reading canv…
    data,check,string,Test at 320 CSS pixels and with large text.
data[10]{task,css,reason,check}:
  Bounded content,"width: min(100% - 32px, 1200px); margin-inline: auto",Use a shared gutter with a maximum reading canvas.,Test at 320 CSS pixels and with large text.
  Flexible two-column grid,"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)",Allow content tracks to shrink below intrinsic widths.,Collapse when the content becomes cramped.
  Shrinkable flex child,"min-width: 0",Allow a long label to fit inside a flex row.,"Without it, intrinsic width may force page overflow."
  Readable prose,"max-width: 70ch; line-height: 1.7",Constrain line length while keeping vertical rhythm.,Actual character widths vary with the font.
  Wide reference table,"overflow-x: auto; max-width: 100%",Keep horizontal scrolling inside the table region.,Make the region keyboard reachable and label it.
  Touch target,"min-height: 44px; min-width: 44px",Provide a practical touch area for controls.,WCAG target-size criteria have additional details and exceptions.
  Long URL,"overflow-wrap: anywhere",Permit unbroken source URLs to wrap.,Keep code blocks scrollable instead of breaking syntax.
  Sticky sidebar,"position: sticky; top: 96px; align-self: start",Keep reference navigation near the data.,Disable or bound it when the viewport is short.
  Reduced motion,"@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }",Avoid unnecessary animated scrolling.,Controls must still communicate state.
  Responsive media,"width: 100%; height: auto; aspect-ratio: 16 / 9",Reserve space for a visual while preserving proportions.,Do not assign a conflicting fixed height.