> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.latch.bio/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

> Layout widgets allow you to control the arrangement of other widgets in your notebook interface.

Layout widgets provide flexible ways to arrange other widgets in your notebook interface. They help you create complex, responsive layouts by combining multiple widgets together.

## Supported Layout Widget Types

Below is a comprehensive list of supported layout widget types.

<AccordionGroup>
  <Accordion icon="align-left" title="Row Layout">
    The Row layout widget arranges widgets horizontally in a single row.

    ```python theme={null}
    from lplots.widgets.row import w_row
    from lplots.widgets.select import w_select
    import plotly.express as px

    # Get the iris dataset
    df = px.data.iris()

    # Get numeric columns for axis selection
    numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()

    # Create a column of select widgets with defaults set to first two columns
    x_axis = w_select(
        label="X-axis",
        options=numeric_cols,
        default=numeric_cols[0]
    )
    y_axis = w_select(
        label="Y-axis",
        options=numeric_cols,
        default=numeric_cols[1]
    )

    w_row(items=[x_axis, y_axis])

    ```

    ### Widget Parameters

    `key`: *string* optional unique identifier for the widget

    `items`: *list\[BaseWidget]* list of widgets to arrange horizontally
  </Accordion>

  <Accordion icon="align-center" title="Column Layout">
    The Column layout widget arranges widgets vertically in a single column.

    ```python theme={null}
    from lplots.widgets.column import w_column
    from lplots.widgets.select import w_select
    import plotly.express as px

    # Get the iris dataset
    df = px.data.iris()

    # Get numeric columns for axis selection
    numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()

    # Create a column of select widgets with defaults set to first two columns
    x_axis = w_select(
        label="X-axis",
        options=numeric_cols,
        default=numeric_cols[0]
    )
    y_axis = w_select(
        label="Y-axis",
        options=numeric_cols,
        default=numeric_cols[1]
    )

    w_column(items=[x_axis, y_axis])

    ```

    ### Widget Parameters

    `key`: *string* optional unique identifier for the widget

    `items`: *list\[BaseWidget]* list of widgets to arrange vertically
  </Accordion>

  <Accordion icon="grid" title="Grid Layout">
    The Grid layout widget allows you to create a grid-based layout where widgets can span multiple rows and columns.

    ```python theme={null}
    from lplots.widgets.grid import w_grid
    from lplots.widgets.plot import w_plot
    import plotly.express as px

    # Create some plots
    df = px.data.iris()
    fig1 = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
    fig2 = px.box(df, x="species", y="petal_length", color="species")
    fig3 = px.histogram(df, x="petal_width", color="species")

    plot1 = w_plot(source=fig1)
    plot2 = w_plot(source=fig2)
    plot3 = w_plot(source=fig3)

    # Create a grid with 3 columns
    with w_grid(columns=3) as g:
        # Add plots to the grid with different spans
        g.add(item=plot1, col_span=2)  # Spans 2 columns
        g.add(item=plot2, col_span=1)  # Spans 1 column
        g.add(item=plot3, col_span=3)  # Spans all columns
    ```

    ### Widget Parameters

    `key`: *string* optional unique identifier for the widget

    `columns`: *int* number of columns in the grid

    `rows`: *int* *optional* number of rows in the grid. If not specified, rows will be created as needed.

    ### Grid Item Parameters

    When adding items to a grid using the `add()` method:

    `item`: *BaseWidget* the widget to add to the grid

    `col_span`: *int* number of columns the item should span (default: 1)

    `row_span`: *int* number of rows the item should span (default: 1)
  </Accordion>
</AccordionGroup>

## Layout Widget Nesting

Layout widgets can be nested to create complex arrangements. For example, you can place a row of widgets inside a grid cell, or create a column of rows.

```python theme={null}
from lplots.widgets.grid import w_grid
from lplots.widgets.column import w_column
from lplots.widgets.select import w_select
from lplots.widgets.plot import w_plot
import plotly.express as px

# Get the iris dataset
df = px.data.iris()

# Get numeric columns for axis selection
numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()

# Create a column of select widgets with defaults set to first two columns
x_axis = w_select(
    label="X-axis",
    options=numeric_cols,
    default=numeric_cols[0]
)
y_axis = w_select(
    label="Y-axis",
    options=numeric_cols,
    default=numeric_cols[1]
)
plot_color = w_select(
    label="Color",
    options=["blue", "red", "green"],
    default="blue"
)

# Create column layout for widgets
column = w_column(items=[x_axis, y_axis, plot_color])

# Create scatter plot
fig1 = px.scatter(
    df,
    x=x_axis.value,
    y=y_axis.value,
    template="simple_white"
)

# Update marker color
fig1.update_traces(marker=dict(color=plot_color.value))

# Render the plot
plot1 = w_plot(source=fig1)

# Add the column and plot to the grid
with w_grid(columns=12) as grid:
    grid.add(item=column, col_span=3)
    grid.add(item=plot1, col_span=9)
```

## Layout Widget Reactivity

Layout widgets are reactive to changes in their child widgets. When a child widget is updated, the layout will automatically adjust to accommodate the changes while maintaining the specified arrangement.