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

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.