Help with understanding how row() and column() works inside a grid?

[Anindya088]

Question

Hi All,

This is a question just for my better understanding of how the row and columns behave when we start nesting them inside each other. I got 2 questions mainly:

1. How to control the children sizes inside a parent container properly?
   I tried doing this:

with ui.row().classes('w-[800px] h-[500px] border border-teal-400 justify-between p-0 m-0'):
    with ui.column().classes('w-[50%] h-[100%] border border-teal-400 p-0 m-0'):
        ui.label('column 1').classes('m-auto')
    with ui.column().classes('w-[50%] h-[100%] border border-teal-400 p-0 m-0'):
        ui.label('column 2').classes('m-auto')

So I was thinking that splitting the columns equally by 50% would keep them side by side, assuming no margin padding etc.
But it still gets to next row. If I reduce the sizes slightly, like 48% then it works.

Can you kindly explain to me what is happening, and why each child cannot be 50% each?

2. Inside a row, the columns get aligned if I use justify-between. But if I use the opposite, rows inside a column, and then use content-between then the rows are not aligned the same way inside a column.
   Ex: I tried this

with ui.column().classes('w-[800px] h-[500px] border border-teal-400 content-between p-0 m-0'):
    with ui.row().classes('w-[100%] h-[48%] border border-teal-400 p-0 m-0'):
        ui.label('row 1').classes('m-auto')
    with ui.row().classes('w-[100%] h-[48%] border border-teal-400 p-0 m-0'):
        ui.label('row 2').classes('m-auto')

But the 2nd row does not get aligned to the bottom of the column, there is a slight gap. But on the opposite, with 2 columns inside a row, even with 48%, the 2 columns get aligned to left and right corners properly.

Can you please also help me understand this please? What is the difference in behaviour between the rows and columns, and how to work around this?

Hope I am able to explain the question properly, otherwise please let me know.

Thanks a lot,
Anindya

[falkoschindler]

Question 1 looks like https://stackoverflow.com/a/76859061/3419103:

The problem is that 50% + gap + 50% is more than 100%. Therefore the flex layout automatically wraps the second box onto the next "line".

You can avoid this behavior using the Tailwind class "no-wrap":

with ui.row().classes("w-96 gap-1 bg-grey no-wrap"):
    ui.label("Wurst").classes("w-1/2 bg-red")
    ui.label("Wurst").classes("w-1/2 bg-red")

Question 2: I think you misunderstand justify-between and content-between. These flex properties always apply along the principal axis or along the secondary axis. So when switching from row to column, the principal axis switches from horizontally to vertically. So you want to use justify-between in both cases:

with ui.row().classes('w-[800px] h-[500px] justify-between border p-0 m-0'):
    with ui.row().classes('w-[48%] h-[100%] border p-0 m-0'):
        ui.label('row 1')
    with ui.row().classes('w-[48%] h-[100%] border p-0 m-0'):
        ui.label('row 2')

with ui.column().classes('w-[800px] h-[500px] justify-between border p-0 m-0'):
    with ui.row().classes('w-[100%] h-[48%] border p-0 m-0'):
        ui.label('row 1')
    with ui.row().classes('w-[100%] h-[48%] border p-0 m-0'):
        ui.label('row 2')

[Anindya088]

Hi @falkoschindler ,

Thanks so much, this is a big help.

For (1) -- the no-wrap is a great solution, thanks for that. Also, I was not aware that there is a default gap applied. So gap-0also helped me to get them arranged properly with 50% each.

For (2), thanks so much, my understanding was 'justify' was x-axis and 'content' was y-axis. Did not realize that x and y themselves are changing when we switch from row to column.

Thanks a lot for the clear explanation.
Anindya