CSS Layout Systems Reference
Modern CSS layout systems: Flexbox, CSS Grid, Multi-column, Positioning, and Container Queries with specifications and use cases.
CSS layout systems with their specification, axis, use case and browser support: Flexbox, CSS Grid, float-based layout, positioning, multi-column and container queries, extended with subgrid and table layout.
Use it when
- You need to choose the layout mechanism for a component or a page.
- You are modernizing legacy float-based CSS.
Watch out for
- Subgrid support reached all major browsers in 2023; older browsers need a fallback.
- Float-based layout is legacy; floats are still correct for wrapping text around an image.
The data
Systems
8 rows
| 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+ |
| Subgrid | CSS Grid Level 2 | Two-dimensional | Aligning the contents of nested grids to the parent grid's tracks | All modern browsers (since 2023) |
| Table Layout | CSS 2.1 | Two-dimensional | Tabular data; auto or fixed column sizing | All browsers |
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 |
|---|---|---|---|
| systems | name | string | Flexbox |
| systems | spec | string | W3C CSS3 |
| systems | axis | string | One-dimensional |
| systems | use_case | string | Navigation bars, centering, equal-height columns |
| systems | browser_support | string | All modern browsers |
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-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 →