...

/

Row and Column in Gradio

Row and Column in Gradio

Learn how to arrange components in rows and columns with Gradio.

Row

When it comes to building the layout with Gradio Blocks, typically components are arranged either by rows or columns. Building a UI with Blocks allows us to customize where each component goes, and Row is how we split the components into different rows explicitly.

In the previous lesson, Introduction to Block Layouts, we saw the welcome page appear as below:

Press + to interact
Example demonstrating default placement of components in a block
Example demonstrating default placement of components in a block

Notice how by default, each element (e.g. the Textbox for ‘What is your name?’, ‘What suburb are you interested in?’, ‘Welcome message!’ and the "Run" button) is placed on top of each other. By default, when we define elements within a Block, they will be arranged in their own row. However, we can explicitly define which components we want in each row.

Row is a layout element within a Block. Anything defined within the Row (children) will be placed ...

Access this course and 1400+ top-rated courses and projects.