Introducing Gradio 5.0

Read More
Gradio logo
  1. Blocks Layout
  2. Column

New to Gradio? Start here: Getting Started

See the Release History

To install Gradio from main, run the following command:

pip install https://gradio-builds.s3.amazonaws.com/7e69a18da0fe5ccabdd516bf958213cf46862a63/gradio-5.15.0-py3-none-any.whl

*Note: Setting share=True in launch() will not work.

โ†

Accordion

Group

โ†’

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

Parameters
๐Ÿ”— 
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

โ†’