api: YAML JSON TOON Database
version: 1.0.0
format: json
dataset:
  id: 15
  slug: css-layout-systems
  title: CSS Layout Systems Reference
  description: "Modern CSS layout systems: Flexbox, CSS Grid, Multi-column, Positioning, and Container Queries with specifications and use cases."
  summary: "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_when[2]: You need to choose the layout mechanism for a component or a page.,You are modernizing legacy float-based CSS.
  caveats[2]: 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.
  related[3]: css-preprocessors-modern-css,browser-web-apis-reference,javascript-frameworks-comparison
  category: Web Technologies
  category_slug: web-technologies
  tags: "css,layout,web,frontend,responsive"
  view_count: 0
  created_at: 1777673262
  updated_at: 1777673262
  entry_count: 8
  fields[5]{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
data:
  systems[8]{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