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

# Row

> A layout component that arranges Gradio components horizontally in a row.

## Overview

The `Row` component is a layout container that arranges child components horizontally. Use it to create side-by-side layouts and control how components are distributed across the width of your interface.

## Basic usage

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

with gr.Blocks() as demo:
    with gr.Row():
        gr.Textbox(label="First Name")
        gr.Textbox(label="Last Name")
        gr.Number(label="Age")

demo.launch()
```

## Parameters

<ParamField path="variant" type="Literal['default', 'panel', 'compact']" default="'default'">
  Row 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, row 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>

<ParamField path="equal_height" type="bool" default="True">
  If True, all child components will have equal height. If False, components will have their natural height.
</ParamField>

## Behavior

### Component scaling

Components within a Row can have different scales to control their relative widths:

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

with gr.Blocks() as demo:
    with gr.Row():
        gr.Textbox(label="Takes 2/3 width", scale=2)
        gr.Textbox(label="Takes 1/3 width", scale=1)

demo.launch()
```

### Equal height

By default, all components in a Row have equal height. You can disable this:

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

with gr.Blocks() as demo:
    with gr.Row(equal_height=False):
        gr.Textbox(label="Short", lines=2)
        gr.Textbox(label="Tall", lines=10)

demo.launch()
```

## Examples

### Panel variant

Create a visually distinct row with a border:

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

with gr.Blocks() as demo:
    with gr.Row(variant="panel"):
        gr.Textbox(label="Username")
        gr.Textbox(label="Password", type="password")
        gr.Button("Login")

demo.launch()
```

### Compact layout

Remove spacing between components:

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

with gr.Blocks() as demo:
    with gr.Row(variant="compact"):
        gr.Button("←")
        gr.Textbox(show_label=False, value="1")
        gr.Button("→")

demo.launch()
```

### Nested layouts

Combine Rows with Columns for complex layouts:

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

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=2):
            gr.Image(label="Input")
        with gr.Column(scale=1):
            gr.Slider(label="Brightness")
            gr.Slider(label="Contrast")
            gr.Button("Process")

demo.launch()
```

### Mobile responsiveness

On mobile devices, Rows automatically stack components vertically:

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

with gr.Blocks() as demo:
    with gr.Row():
        # These will appear side-by-side on desktop
        # but stack on mobile
        gr.Image(label="Before")
        gr.Image(label="After")

demo.launch()
```

## Methods

### update

Update the row's properties:

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

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

demo.launch()
```

## Notes

<Note>
  The `equal_height` parameter is True by default, which means all components will stretch to match the tallest component in the row.
</Note>

<Tip>
  Use the `scale` parameter on individual components to control their relative widths within a Row. A component with `scale=2` will be twice as wide as one with `scale=1`.
</Tip>


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