Layout Components

class Container:
    """
    Responsive container component for wrapping content.
    
    Args:
        children: Child components or content
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        fluid (bool): If True, container spans full width. If False, fixed-width responsive container
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, fluid=False, **kwargs): ...

import dash_bootstrap_components as dbc

# Fixed-width responsive container
layout = dbc.Container([
    html.H1("My Dashboard"),
    html.P("This content is contained within responsive margins.")
])

# Full-width fluid container
layout = dbc.Container([
    html.H1("Full Width Dashboard"),
    html.P("This content spans the full width of the viewport.")
], fluid=True)

class Row:
    """
    Grid system row component for organizing columns.
    
    Args:
        children: Child components (typically Col components)
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        align (str): Vertical alignment - "start", "center", "end", "stretch", "baseline"
        justify (str): Horizontal alignment - "start", "center", "end", "around", "between", "evenly"
        no_gutters (bool): Remove gutters between columns
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, 
                 align=None, justify=None, no_gutters=False, **kwargs): ...

import dash_bootstrap_components as dbc

# Basic row with columns
layout = dbc.Row([
    dbc.Col("Column 1", width=6),
    dbc.Col("Column 2", width=6),
])

# Centered row with custom alignment
layout = dbc.Row([
    dbc.Col("Left", width=3),
    dbc.Col("Center", width=6),
    dbc.Col("Right", width=3),
], justify="center", align="center")

# Row with no gutters between columns
layout = dbc.Row([
    dbc.Col("Seamless Column 1"),
    dbc.Col("Seamless Column 2"),
], no_gutters=True)

class Col:
    """
    Grid system column component with responsive sizing options.
    
    Args:
        children: Child components or content
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        width (int|str): Column width (1-12) or "auto"
        xs (int|str): Extra small breakpoint width (<576px)
        sm (int|str): Small breakpoint width (≥576px)
        md (int|str): Medium breakpoint width (≥768px)
        lg (int|str): Large breakpoint width (≥992px)
        xl (int|str): Extra large breakpoint width (≥1200px)
        xxl (int|str): Extra extra large breakpoint width (≥1400px)
        offset (int): Left margin in terms of columns
        order (int|str): Visual order of the column
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, 
                 width=None, xs=None, sm=None, md=None, lg=None, xl=None, xxl=None,
                 offset=None, order=None, **kwargs): ...

import dash_bootstrap_components as dbc

# Equal width columns
layout = dbc.Row([
    dbc.Col("Equal width 1"),
    dbc.Col("Equal width 2"),
    dbc.Col("Equal width 3"),
])

# Specific width columns (total = 12)
layout = dbc.Row([
    dbc.Col("25%", width=3),
    dbc.Col("50%", width=6),
    dbc.Col("25%", width=3),
])

# Responsive columns with different sizes per breakpoint
layout = dbc.Row([
    dbc.Col("Responsive column", xs=12, sm=6, md=4, lg=3),
    dbc.Col("Another responsive column", xs=12, sm=6, md=8, lg=9),
])

# Column with offset and order
layout = dbc.Row([
    dbc.Col("Second in DOM, first visually", width=4, order=1),
    dbc.Col("First in DOM, second visually", width=4, order=2, offset=4),
])

class Stack:
    """
    Flexible stacking layout component using CSS flexbox.
    
    Args:
        children: Child components to stack
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        direction (str): Stack direction - "vertical" (default) or "horizontal"
        gap (int): Spacing between stacked items (1-5)
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, 
                 direction="vertical", gap=None, **kwargs): ...

import dash_bootstrap_components as dbc

# Vertical stack with gap
layout = dbc.Stack([
    dbc.Button("First Button", color="primary"),
    dbc.Button("Second Button", color="secondary"),
    dbc.Button("Third Button", color="success"),
], gap=3)

# Horizontal stack
layout = dbc.Stack([
    dbc.Badge("Badge 1", color="info"),
    dbc.Badge("Badge 2", color="warning"),
    dbc.Badge("Badge 3", color="danger"),
], direction="horizontal", gap=2)

# Mixed content vertical stack
layout = dbc.Stack([
    html.H3("Section Title"),
    html.P("Some descriptive text about this section."),
    dbc.Button("Action Button", color="primary"),
    dbc.Alert("Status message", color="info"),
], gap=3)

# Mobile-first responsive design
layout = dbc.Container([
    dbc.Row([
        # Full width on mobile, half width on tablet+
        dbc.Col([
            dbc.Card([
                dbc.CardBody("Main content")
            ])
        ], xs=12, md=8),
        # Full width on mobile, quarter width on tablet+
        dbc.Col([
            dbc.Card([
                dbc.CardBody("Sidebar")
            ])
        ], xs=12, md=4),
    ])
])

# Rows and columns can be nested for complex layouts
layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Row([
                dbc.Col("Nested Col 1", width=6),
                dbc.Col("Nested Col 2", width=6),
            ])
        ], width=8),
        dbc.Col("Sidebar", width=4),
    ])
])

# Auto-width columns
layout = dbc.Row([
    dbc.Col("Auto width", width="auto"),
    dbc.Col("Fills remaining space"),
    dbc.Col("Another auto", width="auto"),
])