Layout seems incorrect

[anas-rg]

I have a particular scenario (See attached Image)
What I'm hoping to achieve is the the 2 smaller tiles would show up on the right side of the large square tile and below the rectangular tile.
My setup is pretty straight forward. I used the scroll view sample to setup my layout structure. cards have width and height assigned individually.

Please let me know if I'm missing any steps here.

[gilzoide]

Hey @anas-rg, thanks for the report.
I don't think this is an issue of the project per se, but rather your flexbox layout configuration really outputs what you see there. For layout issues like that, I'd look for whatever you want to achieve and add "flexbox" to the search. Whatever the Yoga library / flexbox can do, this package also can.

Here's an example of someone with the same problem as you who is using flexbox in the web: https://stackoverflow.com/q/41444346

I'm closing this because this is not an issue of the package per se. I'll convert this to a Discussion if you want to discuss further how you could achieve what you want using flexbox.

[anas-rg]

Hey thanks for the link, I will surely look into this. That said, I am not familiar with CSS flexbox so it will take me a lot of time to really figure out the issue by myself. I will be really kind of you to help me with this.

Just to reiterate on what I am hopping to achieve here is...
I am receiving the data about all the cells in an array. All the cell spawned are from left to right and top to bottom. each cell should occupy the space that it can without leaving any empty spaces e.g. in the image attached in the first post, two small boxes right below the large one should actually be (I want them to be) on the right side of the large box right below the rectangular box.

Here are examples of the data I am receiving:

Example 1:

1    :    2x2
2    :    2x1
3    :    1x1
4    :    1x1
5    :    1x1
6    :    1x1
7    :    2x1 

Example 2:

1    :    2x2
2    :    2x1
3    :    2x1
4    :    1x1
5    :    1x1
6    :    2x1 

Here are some more images of the layout with different data sets

[anas-rg]

Examples I am seeing online have predefined grids and, therefore, are using fixed position (I might be wrong, as I said no experience with css flexbox). Though in my case the layout of the grid is not pre-defined and changes based on data received.

[anas-rg]

So apparently, this is also an issue with CSS flex boxes. What I found out was that If you are creating a vertical flex box heights of all the items need to be the same and if you are creating a horizontal flex box width of all the items need to be same. Otherwise, you will run into these gaps.

I ended up discussing this problem with my team and have decided on some constraints that will make sure that the cells will always match height/ width w.r.t. the flex direction.

@gilzoide If you wish to add something to comments please do, otherwise, you can close this discussion.

[gilzoide]

Sorry for the long delay.

Yeah, I don't think Flexbox is the right tool to make what you wanted 😔 You could use a custom LayoutGroup that worked the way you intended though, then use Flex for the rest. Glad to know you found a way to work out the problem, even though it was to change the original design. The only idea I have now is that maybe you could divide the scroll view into 2 columns, then insert the items in them dinamically based on their size, but at that point, a custom LayoutGroup might be a simpler approach 🤔