Skip to main content

​
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

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

​
variant
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.
​
visible
bool
default:"True"
If False, row will be hidden.
​
elem_id
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.
​
elem_classes
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.
​
render
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.
​
equal_height
bool
default:"True"
If True, all child components will have equal height. If False, components will have their natural height.

​
Behavior

​
Component scaling

Components within a Row can have different scales to control their relative widths: 
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: 
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: 
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: 
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: 
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: 
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: 
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

The equal_height parameter is True by default, which means all components will stretch to match the tallest component in the row.
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.