> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Column

> A layout component that arranges Gradio components vertically in a column.

## Overview

The `Column` component is a layout container that arranges child components vertically. Use it to create stacked layouts and control how components are distributed vertically in your interface.

## Basic usage

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Column():
        gr.Textbox(label="Name")
        gr.Textbox(label="Email")
        gr.Button("Submit")

demo.launch()
```

## Parameters

<ParamField path="scale" type="int" default="1">
  Relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.
</ParamField>

<ParamField path="min_width" type="int" default="320">
  Minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min\_width, the min\_width parameter will be respected first.
</ParamField>

<ParamField path="variant" type="Literal['default', 'panel', 'compact']" default="'default'">
  Column type. 'default' adds no additional styling. 'panel' adds a border and padding. 'compact' removes the gap between components.
</ParamField>

<ParamField path="visible" type="bool" default="True">
  If False, column will be hidden.
</ParamField>

<ParamField path="elem_id" type="str | None" default="None">
  An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
</ParamField>

<ParamField path="elem_classes" type="list[str] | str | None" default="None">
  An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
</ParamField>

<ParamField path="render" type="bool" default="True">
  If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
</ParamField>

## Behavior

### Column scaling

When multiple Columns are placed in a Row, the `scale` parameter controls relative widths:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=2):
            gr.Image(label="Main content - 2/3 width")
        with gr.Column(scale=1):
            gr.Textbox(label="Sidebar - 1/3 width")

demo.launch()
```

### Minimum width

Columns will wrap to a new line if the screen is too narrow:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(min_width=400):
            gr.Textbox(label="Needs 400px minimum")
        with gr.Column(min_width=200):
            gr.Textbox(label="Needs 200px minimum")

demo.launch()
```

## Examples

### Panel variant

Create a visually distinct column with a border:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(variant="panel"):
            gr.Markdown("### Settings")
            gr.Slider(label="Temperature")
            gr.Slider(label="Max tokens")
        with gr.Column():
            gr.Textbox(label="Output")

demo.launch()
```

### Compact layout

Remove spacing between components:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Column(variant="compact"):
        gr.Markdown("### Compact Form")
        gr.Textbox(label="Field 1")
        gr.Textbox(label="Field 2")
        gr.Textbox(label="Field 3")

demo.launch()
```

### Sidebar layout

Create a classic sidebar layout:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1, min_width=250):
            gr.Markdown("### Controls")
            model = gr.Dropdown(["GPT-4", "Claude"], label="Model")
            temp = gr.Slider(0, 2, label="Temperature")
            submit = gr.Button("Generate")
        
        with gr.Column(scale=3):
            gr.Markdown("### Output")
            output = gr.Textbox(lines=20, label="Generated text")

demo.launch()
```

### Multi-column grid

Create a responsive grid layout:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(min_width=300):
            gr.Image(label="Image 1")
            gr.Textbox(label="Caption 1")
        with gr.Column(min_width=300):
            gr.Image(label="Image 2")
            gr.Textbox(label="Caption 2")
        with gr.Column(min_width=300):
            gr.Image(label="Image 3")
            gr.Textbox(label="Caption 3")

demo.launch()
```

### Nested columns

Combine Columns for complex layouts:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Column(variant="panel"):
                gr.Markdown("### Input")
                gr.Textbox(label="Prompt")
            with gr.Column(variant="panel"):
                gr.Markdown("### Settings")
                gr.Slider(label="Strength")
        
        with gr.Column(scale=2):
            gr.Image(label="Generated Image")

demo.launch()
```

## Methods

### update

Update the column's properties:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    col = gr.Column(visible=True)
    with col:
        gr.Textbox(label="Hidden content")
    
    toggle_btn = gr.Button("Toggle Column")
    toggle_btn.click(
        lambda: gr.Column(visible=False),
        outputs=col
    )

demo.launch()
```

## Notes

<Note>
  When Columns are nested directly within a Blocks context (not in a Row), they will appear one below the other, each taking the full width.
</Note>

<Tip>
  Use `min_width` to ensure your layout remains usable on smaller screens. The layout will automatically wrap columns to new lines when needed.
</Tip>

<Tip>
  The `variant="panel"` option is great for creating visually distinct sections in your interface, especially for sidebars or settings panels.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.