Responsive CSS Layout Recipes
Small CSS patterns for resilient columns, readable text, scrollable data, and mobile controls.
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 it when
- Fix page overflow without hiding the offending content.
- Build a responsive reference or documentation page.
Watch out for
- Snippets need to be adapted to their containing layout.
- Do not use overflow hidden to conceal inaccessible data.
The data
10 rows
| 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. |
Fields
The shape of this dataset, read from the data itself: every column, its type and a real value. Agents can use this to plan a query without fetching the whole document.
| 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. |
Fetch the same bytes
The static files contain the same reference rows as the API, with no API rate limit. Live metadata, such as view counts, may differ. Use the API for content negotiation; use the static files for a cacheable snapshot.
curl "https://yjtoon.com/api/dataset/css-layout-recipes?format=toon"
const res = await fetch( "https://yjtoon.com/static-data/dataset/css-layout-recipes.toon" ); const toon = await res.text();
Rate limit: 120 requests per minute per IP, no key and no signup. API reference →
Sources and editorial notes
Original editorial reference notes by YJTOON, informed by the linked primary documentation. External specifications retain their own licenses.
Editorial review: . Source documents keep their own licenses.