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:
    - You need to choose the layout mechanism for a component or a page.
    - You are modernizing legacy float-based CSS.
  caveats:
    - 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:
    - 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:
    - section: systems
      field: name
      type: string
      example: Flexbox
    - section: systems
      field: spec
      type: string
      example: W3C CSS3
    - section: systems
      field: axis
      type: string
      example: One-dimensional
    - section: systems
      field: use_case
      type: string
      example: Navigation bars, centering, equal-height columns
    - section: systems
      field: browser_support
      type: string
      example: All modern browsers
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+
    - name: Subgrid
      spec: CSS Grid Level 2
      axis: Two-dimensional
      use_case: Aligning the contents of nested grids to the parent grid's tracks
      browser_support: All modern browsers (since 2023)
    - name: Table Layout
      spec: CSS 2.1
      axis: Two-dimensional
      use_case: Tabular data; auto or fixed column sizing
      browser_support: All browsers