CSS Layout Systems Reference
Modern CSS layout systems: Flexbox, CSS Grid, Multi-column, Positioning, and Container Queries with specifications and use cases.
The data
Systems
| Name | Spec | Axis | Use case | Browser support |
|---|---|---|---|---|
| Flexbox | W3C CSS3 | One-dimensional | Navigation bars, centering, equal-height columns | All modern browsers |
| CSS Grid | W3C CSS3 | Two-dimensional | Page layouts, card grids, dashboards | All modern browsers |
| Float-based Layout | CSS2.1 | Legacy | Text wrapping around images (deprecated for layout) | All browsers |
| Positioning | CSS2 | Absolute/Relative | Overlays, modals, fixed headers | All browsers |
| Multi-column | W3C CSS3 | One-dimensional | Magazine-style text layouts | All modern browsers |
| Container Queries | W3C CSS Containment Level 3 | One-dimensional | Component-level responsive design | Chrome 105+, Safari 16+, Firefox 110+ |
Fetch the same bytes
The static files are identical to what the API returns, but with no rate limit and no server round trip. Use the API when you want a query and a content type; use the files when you want to cache one document.
curl "https://yjtoon.com/api/dataset/css-layout-systems?format=toon"
const res = await fetch( "https://yjtoon.com/static-data/dataset/css-layout-systems.toon" ); const toon = await res.text();
Rate limit: 120 requests per minute per IP, no key and no signup. API reference →