# Controlling Layout By default, Components in Blocks are arranged vertically. Let's take a look at how we can rearrange Components. Under the hood, this layout structure uses the [flexbox model of web development](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). ## Rows Elements within a `with gr.Row` clause will all be displayed horizontally. For example, to display two Buttons side by side: ```python with gr.Blocks() as demo: with gr.Row(): btn1 = gr.Button("Button 1") btn2 = gr.Button("Button 2") ``` You can set every element in a Row to have the same height. Configure this with the `equal_height` argument. ```python with gr.Blocks() as demo: with gr.Row(equal_height=True): textbox = gr.Textbox() btn2 = gr.Button("Button 2") ``` The widths of elements in a Row can be controlled via a combination of `scale` and `min_width` arguments that are present in every Component. - `scale` is an integer that defines how an element will take up space in a Row. If scale is set to `0`, the element will not expand to take up space. If scale is set to `1` or greater, the element will expand. Multiple elements in a row will expand proportional to their scale. Below, `btn2` will expand twice as much as `btn1`, while `btn0` will not expand at all: ```python with gr.Blocks() as demo: with gr.Row(): btn0 = gr.Button("Button 0", scale=0) btn1 = gr.Button("Button 1", scale=1) btn2 = gr.Button("Button 2", scale=2) ``` - `min_width` will set the minimum width the element will take. The Row will wrap if there isn't sufficient space to satisfy all `min_width` values. Learn more about Rows in the [docs](https://gradio.app/docs/row). ## Columns and Nesting Components within a Column will be placed vertically atop each other. Since the vertical layout is the default layout for Blocks apps anyway, to be useful, Columns are usually nested within Rows. For example: ```python import gradio as gr with gr.Blocks() as demo: with gr.Row(): text1 = gr.Textbox(label="t1") slider2 = gr.Textbox(label="s2") drop3 = gr.Dropdown(["a", "b", "c"], label="d3") with gr.Row(): with gr.Column(scale=1, min_width=300): text1 = gr.Textbox(label="prompt 1") text2 = gr.Textbox(label="prompt 2") inbtw = gr.Button("Between") text4 = gr.Textbox(label="prompt 1") text5 = gr.Textbox(label="prompt 2") with gr.Column(scale=2, min_width=300): img1 = gr.Image("images/cheetah.jpg") btn = gr.Button("Go") demo.launch() ``` See how the first column has two Textboxes arranged vertically. The second column has an Image and Button arranged vertically. Notice how the relative widths of the two columns is set by the `scale` parameter. The column with twice the `scale` value takes up twice the width. Learn more about Columns in the [docs](https://gradio.app/docs/column). # Fill Browser Height / Width To make an app take the full width of the browser by removing the side padding, use `gr.Blocks(fill_width=True)`. To make top level Components expand to take the full height of the browser, use `fill_height` and apply scale to the expanding Components. ```python import gradio as gr with gr.Blocks(fill_height=True) as demo: gr.Chatbot(scale=1) gr.Textbox(scale=0) ``` ## Dimensions Some components support setting height and width. These parameters accept either a number (interpreted as pixels) or a string. Using a string allows the direct application of any CSS unit to the encapsulating Block element. Below is an example illustrating the use of viewport width (vw): ```python import gradio as gr with gr.Blocks() as demo: im = gr.ImageEditor(width="50vw") demo.launch() ``` ## Tabs and Accordions You can also create Tabs using the `with gr.Tab('tab_name'):` clause. Any component created inside of a `with gr.Tab('tab_name'):` context appears in that tab. Consecutive Tab clauses are grouped together so that a single tab can be selected at one time, and only the components within that Tab's context are shown. For example: ```python import numpy as np import gradio as gr def flip_text(x): return x[::-1] def flip_image(x): return np.fliplr(x) with gr.Blocks() as demo: gr.Markdown("Flip text or image files using this demo.") with gr.Tab("Flip Text"): text_input = gr.Textbox() text_output = gr.Textbox() text_button = gr.Button("Flip") with gr.Tab("Flip Image"): with gr.Row(): image_input = gr.Image() image_output = gr.Image() image_button = gr.Button("Flip") with gr.Accordion("Open for More!", open=False): gr.Markdown("Look at me...") temp_slider = gr.Slider( 0, 1, value=0.1, step=0.1, interactive=True, label="Slide me", ) text_button.click(flip_text, inputs=text_input, outputs=text_output) image_button.click(flip_image, inputs=image_input, outputs=image_output) demo.launch() ``` Also note the `gr.Accordion('label')` in this example. The Accordion is a layout that can be toggled open or closed. Like `Tabs`, it is a layout element that can selectively hide or show content. Any components that are defined inside of a `with gr.Accordion('label'):` will be hidden or shown when the accordion's toggle icon is clicked. Learn more about [Tabs](https://gradio.app/docs/tab) and [Accordions](https://gradio.app/docs/accordion) in the docs. ## Sidebar The sidebar is a collapsible panel that renders child components on the left side of the screen and can be expanded or collapsed. For example: ```python import gradio as gr import random def generate_pet_name(animal_type, personality): cute_prefixes = ["Fluffy", "Ziggy", "Bubbles", "Pickle", "Waffle", "Mochi", "Cookie", "Pepper"] animal_suffixes = { "Cat": ["Whiskers", "Paws", "Mittens", "Purrington"], "Dog": ["Woofles", "Barkington", "Waggins", "Pawsome"], "Bird": ["Feathers", "Wings", "Chirpy", "Tweets"], "Rabbit": ["Hops", "Cottontail", "Bouncy", "Fluff"] } prefix = random.choice(cute_prefixes) suffix = random.choice(animal_suffixes[animal_type]) if personality == "Silly": prefix = random.choice(["Sir", "Lady", "Captain", "Professor"]) + " " + prefix elif personality == "Royal": suffix += " the " + random.choice(["Great", "Magnificent", "Wise", "Brave"]) return f"{prefix} {suffix}" with gr.Blocks() as demo: with gr.Sidebar(position="left"): gr.Markdown("# 🐾 Pet Name Generator") gr.Markdown("Use the options below to generate a unique pet name!") animal_type = gr.Dropdown( choices=["Cat", "Dog", "Bird", "Rabbit"], label="Choose your pet type", value="Cat" ) personality = gr.Radio( choices=["Normal", "Silly", "Royal"], label="Personality type", value="Normal" ) name_output = gr.Textbox(label="Your pet's fancy name:", lines=2) generate_btn = gr.Button("Generate Name! 🎲", variant="primary") generate_btn.click( fn=generate_pet_name, inputs=[animal_type, personality], outputs=name_output ) if __name__ == "__main__": demo.launch(theme=gr.themes.Soft()) ``` Learn more about [Sidebar](https://gradio.app/docs/gradio/sidebar) in the docs. ## Multi-step walkthroughs In order to provide a guided set of ordered steps, a controlled workflow, you can use the `Walkthrough` component with accompanying `Step` components. The `Walkthrough` component has a visual style and user experience tailored for this usecase. Authoring this component is very similar to `Tab`, except it is the app developers responsibility to progress through each step, by setting the appropriate ID for the parent `Walkthrough` which should correspond to an ID provided to an indvidual `Step`. Learn more about [Walkthrough](https://gradio.app/docs/gradio/walkthrough) in the docs. ## Visibility Both Components and Layout elements have a `visible` argument that can set initially and also updated. Setting `gr.Column(visible=...)` on a Column can be used to show or hide a set of Components. ```python import gradio as gr with gr.Blocks() as demo: name_box = gr.Textbox(label="Name") age_box = gr.Number(label="Age", minimum=0, maximum=100) symptoms_box = gr.CheckboxGroup(["Cough", "Fever", "Runny Nose"]) submit_btn = gr.Button("Submit") with gr.Column(visible=False) as output_col: diagnosis_box = gr.Textbox(label="Diagnosis") patient_summary_box = gr.Textbox(label="Patient Summary") def submit(name, age, symptoms): return { submit_btn: gr.Button(visible=False), output_col: gr.Column(visible=True), diagnosis_box: "covid" if "Cough" in symptoms else "flu", patient_summary_box: f"{name}, {age} y/o", } submit_btn.click( submit, [name_box, age_box, symptoms_box], [submit_btn, diagnosis_box, patient_summary_box, output_col], ) demo.launch() ``` ## Defining and Rendering Components Separately In some cases, you might want to define components before you actually render them in your UI. For instance, you might want to show an examples section using `gr.Examples` above the corresponding `gr.Textbox` input. Since `gr.Examples` requires as a parameter the input component object, you will need to first define the input component, but then render it later, after you have defined the `gr.Examples` object. The solution to this is to define the `gr.Textbox` outside of the `gr.Blocks()` scope and use the component's `.render()` method wherever you'd like it placed in the UI. Here's a full code example: ```python input_textbox = gr.Textbox() with gr.Blocks() as demo: gr.Examples(["hello", "bonjour", "merhaba"], input_textbox) input_textbox.render() ``` Similarly, if you have already defined a component in a Gradio app, but wish to unrender it so that you can define in a different part of your application, then you can call the `.unrender()` method. In the following example, the `Textbox` will appear in the third column: ```py import gradio as gr with gr.Blocks() as demo: with gr.Row(): with gr.Column(): gr.Markdown("Row 1") textbox = gr.Textbox() with gr.Column(): gr.Markdown("Row 2") textbox.unrender() with gr.Column(): gr.Markdown("Row 3") textbox.render() demo.launch() ```