Column

gradio.Column(···)

Description

Column is a layout element within Blocks that renders all children vertically. The widths of columns can be set through the `scale` and `min_width` parameters. If a certain scale results in a column narrower than min_width, the min_width parameter will win.

Example Usage

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1):
            text1 = gr.Textbox()
            text2 = gr.Textbox()
        with gr.Column(scale=4):
            btn1 = gr.Button("Button 1")
            btn2 = gr.Button("Button 2")

Initialization

🔗

scale: int

default = 1

relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.

🔗

min_width: int

default = 320

minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.

🔗

variant: Literal['default', 'panel', 'compact']

default = "default"

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

🔗

visible: bool

default = True

If False, column 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.

🔗

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.

🔗

show_progress: bool

default = False

If True, shows progress animation when being updated.

Guides

Controlling Layout

←

Accordion

Group