1. Blocks Layout
  2. Row

New to Gradio? Start here: Getting Started

See the Release History

←

Group

Tab

→

Row

gradio.Row(···)

Description

Row is a layout element within Blocks that renders all children horizontally.

Example Usage

with gr.Blocks() as demo:
    with gr.Row():
        gr.Image("lion.jpg", scale=2)
        gr.Image("tiger.jpg", scale=1)
demo.launch()

Initialization

Parameters
🔗 
variant: Literal['default', 'panel', 'compact']
default = "default"

row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).

🔗 
visible: bool | Literal['hidden']
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 string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.

🔗 
scale: int | None
default = None

relative height compared to adjacent elements. 1 or greater indicates the Row will expand in height, and any child columns will also expand to fill the height.

🔗 
render: bool
default = True

If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.

🔗 
height: int | str | None
default = None

The height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will scroll vertically. If not set, the row will expand to fit the content.

🔗 
max_height: int | str | None
default = None

The maximum height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will scroll vertically. If content is shorter than the height, the row will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.

🔗 
min_height: int | str | None
default = None

The minimum height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.

🔗 
equal_height: bool
default = False

If True, makes every child element have equal height

🔗 
show_progress: bool
default = False

If True, shows progress animation when being updated.

🔗 
key: int | str | tuple[int | str, ...] | None
default = None

in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.

🔗 
preserved_by_key: list[str] | str | None
default = None

A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.

Guides

Controlling Layout

←

Group

Tab

→