> ## 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.

# Controlling layout

> Learn how to arrange Gradio components using rows, columns, tabs, and other layout elements to create custom interfaces.

By default, components in Blocks are arranged vertically. But you have full control over how components are positioned using layout elements. Under the hood, Gradio uses the [flexbox model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) from web development.

## Rows

Use `gr.Row()` to arrange components horizontally:

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

with gr.Blocks() as demo:
    with gr.Row():
        btn1 = gr.Button("Button 1")
        btn2 = gr.Button("Button 2")

demo.launch()
```

Both buttons will appear side by side on the same horizontal line.

### Equal height

You can make all elements in a row have the same height:

```python theme={null}
with gr.Blocks() as demo:
    with gr.Row(equal_height=True):
        textbox = gr.Textbox()
        btn = gr.Button("Button 2")

demo.launch()
```

### Controlling width with scale and min\_width

Every component has two parameters that control its width within a row:

#### The scale parameter

The `scale` parameter determines how components expand to fill available space:

* **`scale=0`**: Component does not expand, takes only the space it needs
* **`scale=1` or higher**: Component expands proportionally to its scale value

```python theme={null}
with gr.Blocks() as demo:
    with gr.Row():
        btn0 = gr.Button("Button 0", scale=0)  # No expansion
        btn1 = gr.Button("Button 1", scale=1)  # Expands 1x
        btn2 = gr.Button("Button 2", scale=2)  # Expands 2x (twice as wide as btn1)

demo.launch()
```

In this example, `btn2` will be twice as wide as `btn1`, while `btn0` stays at its minimum size.

#### The min\_width parameter

The `min_width` parameter sets the minimum width (in pixels) that a component will take. If there isn't enough space to satisfy all `min_width` values, the row will wrap:

```python theme={null}
with gr.Blocks() as demo:
    with gr.Row():
        btn1 = gr.Button("Button 1", min_width=300)
        btn2 = gr.Button("Button 2", min_width=300)

demo.launch()
```

<Note>
  Learn more about Rows in the [Row documentation](/components/row).
</Note>

## Columns and nesting

Components within a `gr.Column()` are stacked vertically. Since vertical stacking is the default, columns are most useful when nested inside rows:

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

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            text1 = gr.Textbox(label="Input 1")
            text2 = gr.Textbox(label="Input 2")
        with gr.Column():
            image = gr.Image()
            button = gr.Button("Process")

demo.launch()
```

In this layout:

* The first column contains two textboxes stacked vertically
* The second column contains an image and a button stacked vertically
* Both columns sit side by side in the row

### Controlling column width

Just like components in rows, columns support the `scale` parameter:

```python theme={null}
with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1):
            text1 = gr.Textbox(label="Input 1")
            text2 = gr.Textbox(label="Input 2")
        with gr.Column(scale=2):
            image = gr.Image()
            button = gr.Button("Process")

demo.launch()
```

The second column will be twice as wide as the first.

<Note>
  Learn more about Columns in the [Column documentation](/components/column).
</Note>

## Fill browser height and width

### Full width

To make your app take the full width of the browser (removing side padding), use `fill_width=True`:

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

with gr.Blocks(fill_width=True) as demo:
    # Your components here
    pass

demo.launch()
```

### Full height

To make top-level components expand to fill the browser height:

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

with gr.Blocks(fill_height=True) as demo:
    gr.Chatbot(scale=1)  # Expands to fill available space
    gr.Textbox(scale=0)  # Takes only the space it needs

demo.launch()
```

<Note>
  Components need `scale >= 1` to expand vertically when `fill_height=True` is enabled.
</Note>

## Dimensions

Some components support explicit `height` and `width` parameters. These accept either:

* **A number**: Interpreted as pixels
* **A string**: Allows any CSS unit (px, em, rem, vh, vw, etc.)

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

with gr.Blocks() as demo:
    # Using viewport width units
    im = gr.ImageEditor(width="50vw")
    
    # Using pixels
    text = gr.Textbox(height=200)

demo.launch()
```

## Tabs

Create tabbed interfaces with `gr.Tab()`. Each tab selectively shows or hides its contents:

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

def flip_text(text):
    return text[::-1]

def flip_image(image):
    return image.rotate(180)

with gr.Blocks() as demo:
    gr.Markdown("# Flip Text or Image")
    
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
        text_button.click(flip_text, inputs=text_input, outputs=text_output)
    
    with gr.Tab("Flip Image"):
        image_input = gr.Image()
        image_output = gr.Image()
        image_button = gr.Button("Flip")
        image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()
```

Consecutive `gr.Tab()` contexts are automatically grouped together. Only one tab can be selected at a time, and only that tab's components are visible.

<Note>
  Learn more in the [Tab documentation](/components/tabs).
</Note>

## Accordions

Accordions provide collapsible sections that can be toggled open or closed:

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

with gr.Blocks() as demo:
    with gr.Accordion("Advanced Options", open=False):
        temperature = gr.Slider(0, 1, value=0.7, label="Temperature")
        top_p = gr.Slider(0, 1, value=0.9, label="Top P")
        max_tokens = gr.Slider(1, 2048, value=256, label="Max Tokens")

demo.launch()
```

The `open` parameter controls whether the accordion starts expanded or collapsed.

<Note>
  Learn more in the [Accordion documentation](/components/accordion).
</Note>

## Sidebar

The sidebar creates a collapsible panel on the left side of the screen:

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

with gr.Blocks() as demo:
    with gr.Sidebar():
        gr.Markdown("## Settings")
        model = gr.Dropdown(["GPT-4", "GPT-3.5"], label="Model")
        temperature = gr.Slider(0, 1, value=0.7, label="Temperature")
    
    # Main content
    gr.Markdown("# Chat Application")
    chatbot = gr.Chatbot()
    msg = gr.Textbox()

demo.launch()
```

<Note>
  Learn more in the [Sidebar documentation](https://gradio.app/docs/gradio/sidebar).
</Note>

## Multi-step walkthroughs

For guided workflows, use the `Walkthrough` component with `Step` components:

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

with gr.Blocks() as demo:
    walkthrough = gr.Walkthrough(value="step1")
    
    with gr.Step(id="step1", parent=walkthrough):
        gr.Markdown("## Step 1: Enter your information")
        name = gr.Textbox(label="Name")
        gr.Button("Next").click(
            lambda: "step2",
            outputs=walkthrough
        )
    
    with gr.Step(id="step2", parent=walkthrough):
        gr.Markdown("## Step 2: Review and submit")
        gr.Button("Back").click(
            lambda: "step1",
            outputs=walkthrough
        )
        gr.Button("Submit")

demo.launch()
```

The `Walkthrough` component has a visual style tailored for step-by-step workflows. You control progression by setting the appropriate step ID.

<Note>
  Learn more in the [Walkthrough documentation](https://gradio.app/docs/gradio/walkthrough).
</Note>

## Visibility

Both components and layout elements have a `visible` parameter that can be set initially and updated dynamically:

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

def toggle_textbox(choice):
    if choice == "Yes":
        return gr.Textbox(visible=True)
    else:
        return gr.Textbox(visible=False)

with gr.Blocks() as demo:
    radio = gr.Radio(["Yes", "No"], label="Show textbox?")
    textbox = gr.Textbox(label="Hidden by default", visible=False)
    
    radio.change(toggle_textbox, radio, textbox)

demo.launch()
```

Setting `gr.Column(visible=False)` on a column hides all components inside it.

## Defining and rendering components separately

Sometimes you need to define a component before you render it in the UI. For example, when using `gr.Examples`, you need to pass the input component to it, but might want to render the examples first:

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

# Define the component outside the Blocks context
input_textbox = gr.Textbox()

with gr.Blocks() as demo:
    # Show examples first
    gr.Examples(["hello", "bonjour", "merhaba"], input_textbox)
    
    # Render the textbox later
    input_textbox.render()

demo.launch()
```

The `.render()` method places the component wherever you call it.

### Unrendering and moving components

You can also move a component by unrendering it and rendering it elsewhere:

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

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            gr.Markdown("Column 1")
            textbox = gr.Textbox()
        with gr.Column():
            gr.Markdown("Column 2")
            textbox.unrender()  # Remove from Column 1
        with gr.Column():
            gr.Markdown("Column 3")
            textbox.render()  # Add to Column 3

demo.launch()
```

The textbox will appear in the third column.

## Next steps

Now that you know how to control layout, you can:

* Learn about [managing state](/guides/state-in-blocks) in your applications
* Build [dynamic apps](/guides/dynamic-apps) with the render decorator
* Add [custom CSS](/guides/custom-css-js) for advanced styling


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