Be able to adjust column widths

[aliabid94]

We use gr.Row() and gr.Column() currently to configure the layout using flexbox. Currently this implementation is unintuitive for some users, so opening this issue for discussion.

Take a look at this image below:

The current code to render this would be:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Welcome")
    gr.CheckboxGroup(["Option 1", "Option 2", "Option 3"])
    with gr.Row():
        gr.Image("cheetah1.jpg")
        gr.Image("lion.jpg")
    with gr.Row():
        btn1 = gr.Button("Load")
        btn2 = gr.Button("Save")
        with gr.Column():
            btn3 = gr.Button("Delete")
            btn4 = gr.Button("Close")
            
demo.launch()

where gr.Row() will lay out every child component in a flex row, and gr.Column() will lay out all child components in a flex column.

[aliabid94]

@abidlabs had suggested an alternative API, where everything is laid out vertically, unless placed in adjacent columns. His suggested API for the same demo would be:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Welcome")
    gr.CheckboxGroup(["Option 1", "Option 2", "Option 3"])
    with gr.Row():
        with gr.Column():
            gr.Image("cheetah1.jpg")
        with gr.Column():
            gr.Image("lion.jpg")
    with gr.Row():
        with gr.Column():
            btn1 = gr.Button("Load")
        with gr.Column():
            btn2 = gr.Button("Save")
        with gr.Column():
            btn3 = gr.Button("Delete")
            btn4 = gr.Button("Close")
            
demo.launch()

[abidlabs]

Slightly tweaking the API above, we can actually get rid of gr.Row() altogether:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Welcome")
    gr.CheckboxGroup(["Option 1", "Option 2", "Option 3"])
    col1, col2 = gr.Columns(2)
    with col1:
        gr.Image("cheetah1.jpg")
    with col2:
        gr.Image("lion.jpg")
      
    col1, col2, col3 = gr.Columns(3)
    with col1:
        btn1 = gr.Button("Load")
    with col2:
        btn2 = gr.Button("Save")
    with col3:
        btn3 = gr.Button("Delete")
        btn4 = gr.Button("Close")
            
demo.launch()

One advantage of this is that it reduces the amount of nestedness. Also its how streamlit does columns I think, which would make it easier for people coming from streamlit

What do you guys think about this? cc @radames @pngwn

[radames]

Here are some comments.
The current approach made a lot of sense to me since it follows the flexbox model, the issue that confused me was solve by #1165

I like the possibility of controlling the columns width like streamlit does, or maybe something like this? The only issue is we will have to offer some responsive features, or tell users they need to think about it when design for mobile.

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Welcome")
    gr.CheckboxGroup(["Option 1", "Option 2", "Option 3"])
    with gr.Row():
        with gr.Column("70%"):
            gr.Image("cheetah1.jpg")
            gr.Image("lion.jpg")
        with gr.Column("30%"):
            gr.Image("cheetah1.jpg")
            gr.Image("lion.jpg")
    with gr.Row():
        with gr.Column():
            btn1 = gr.Button("Load")
            btn2 = gr.Button("Save")
        with gr.Column():
            btn3 = gr.Button("Delete")
            btn4 = gr.Button("Close")
    with gr.Row():
        gr.Image("cheetah1.jpg")

demo.launch()

On your approach @abidlabs how would define a new row? a new gr.Columns() definition? also how would you approach a responsive design? In case you need to flexwrap on small screens.

[abidlabs]

I like the possibility of controlling the columns width like streamlit does, or maybe something like this? The only issue is we will have to offer some responsive features, or tell users they need to think about it when design for mobile.

Strongly agree, this is related to #637 as well.

On your approach @abidlabs how would define a new row? a new gr.Columns() definition? also how would you approach a responsive design? In case you need to flexwrap on small screens.

A new row would be created with a new gr.Columns() definition OR if a component is created outside of the previously defined columns. For me, this seems pretty intuitive, but is just a suggestion.

[pngwn]

I've come to the conclusion that find them all confusing in some way, and I don't have a strong preference.

As an alternative way of looking at the problem, how would we teach this?

What is the mental model for the various approaches? Without relying on examples, can you come up with a set of rules that would explain how the row/col/component interaction works for the different designs?

[abidlabs]

The mental model for the current API described here (#1162 (comment)) is the same as the flexbox model:

• You can either be in a gr.Column(), in which case your children elements are laid out vertically, OR
• You can be in a gr.Row(), in which case your children elements are laid out horizontally

Initially this was not clear to me, and I was super confused. But now that I've read up on flexbox, I think it's a pretty clear and its not a bad idea to stick with a mental model that some users may be familiar with. (We may able to reduce the nestedness with something similar to what I proposed but it comes at the cost of increasing the number of lines so I'm not going to push for it)

@radames is right that we need to include some mechanism for adjusting column widths. But we can do that post 3.0.

[abidlabs]

Removing from 3.0 as we can have support for adjusting column widths post 3.0 launch.