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."
  category: "Web Technologies"
  category_slug: "web-technologies"
  tags: "css,layout,web,frontend,responsive"
  view_count: 0
  created_at: 1777673262
  updated_at: 1777673262
data:
  systems:
    - name: "Flexbox"
      spec: "W3C CSS3"
      axis: "One-dimensional"
      use_case: "Navigation bars, centering, equal-height columns"
      browser_support: "All modern browsers"
    - name: "CSS Grid"
      spec: "W3C CSS3"
      axis: "Two-dimensional"
      use_case: "Page layouts, card grids, dashboards"
      browser_support: "All modern browsers"
    - name: "Float-based Layout"
      spec: "CSS2.1"
      axis: "Legacy"
      use_case: "Text wrapping around images (deprecated for layout)"
      browser_support: "All browsers"
    - name: "Positioning"
      spec: "CSS2"
      axis: "Absolute/Relative"
      use_case: "Overlays, modals, fixed headers"
      browser_support: "All browsers"
    - name: "Multi-column"
      spec: "W3C CSS3"
      axis: "One-dimensional"
      use_case: "Magazine-style text layouts"
      browser_support: "All modern browsers"
    - name: "Container Queries"
      spec: "W3C CSS Containment Level 3"
      axis: "One-dimensional"
      use_case: "Component-level responsive design"
      browser_support: "Chrome 105+, Safari 16+, Firefox 110+"