Not clear how to layout element using ui.row() and ui.column()

[gioxc88]

Hello,
I have read the documentation a few times. I am aware of ui.row, ui.column and ui.grid

Still can't understand how to nest elements to create grids with arbitrary layout.

For example if I want:

• a row with two columns, one column occupying 2/12 of the space and the second column occupying 10/12 of the space.

How do I achieve this ? I see in Quasar you specify col-2or col-10 but I couldn't find a way to make it work with nicegui

And to expand on my example above.

Say that inside the second column (the one occupying 10/12 of the space) I want to further layout 3 rows, respectively occupying 1/2, 1/4 and 1/4 of the space.

What is the correct approach to achieve this kind of arbitrary grid layout ?

Any help would be greatly appreciated.
Thank you for the amazing work.
After having used most of the python web frameworks out there, I finally feel like I could settle with nicegui.

[falkoschindler]

Hi @gioxc88,

I see in Quasar you specify col-2 or col-10
Can you share a link?

Here is how I would implement your two examples in NiceGUI:

with ui.row(wrap=False).classes('w-100'):
    with ui.column().classes('col-2 border'):
        ui.label('2/12')
    with ui.column().classes('col-10 border'):
        ui.label('10/12')

with ui.row(wrap=False).classes('w-100'):
    with ui.column().classes('col-2 border'):
        ui.label('2/12')
    with ui.column().classes('col-10 h-100 border'):
        with ui.row().classes('h-1/2 border'):
            ui.label('1/2')
        with ui.row().classes('h-1/4 border'):
            ui.label('1/4')
        with ui.row().classes('h-1/4 border'):
            ui.label('1/4')

Note that we see "w-100" and "h-100" to give the container a size before its children can occupy fractions of it. Maybe there's a way around it - which is why it would be interesting to see the Quasar code.