Grid with dynamic number of columns

[floriankorsakissok]

What I’d like to achieve using UITK is a layout where all elements have the same size at any given time, and they’re laid out in a grid. Each element has a min and max width.

Here’s what I’m thinking:

When shrinking the parent container, first the columns will just shrink:

Then, when the children’s min width is reached, the number of columns is reduced:

It seems very difficult to achieve using the current flexbox model. If I simply add child elements with a min and max width, all with the same fixed height, set the container to wrap sub-elements, it will not achieve what I want. All items in a given row will have the same width alright, but different rows can set different widths for their children:

The only solution I see with the current feature set is to implement a custom VisualElement class, which places its children using absolute coordinates (i.e. bypassing the flexbox model entirely) upon geometry change, and implementing the logic in C#. It defeats the purpose of having a layout engine in the first place.

Any idea of how I could achieve this in a nice way? Are there planned modifications to UITK that would make this easier?

[JuliaP_Unity]

Unfortunately right now there’s no way to accomplish this without some code. Whether you implement your own VisualElement, or simply have scripts post process the position/size of the elements in your layout, I don’t see how you can accomplish this.

We have a grid layout feature in our roadmap already, but it’s not being worked on immediately - if you want you can upvote it and signal to Unity that this is a very much desired feature
You can find this in our Product Roadmap, more specifically the grid layout can be found in this link: https://portal.productboard.com/xvo8kmgtx7tkv7desh8cyaj7/c/293-grid-layout?utm_medium=social&utm_source=portal_share

[floriankorsakissok]

Good to know! Thank you.

I saw the item in the roadmap and I had already upvoted it before posting - but I was wondering if for that specific use case there was a way I did not think of.

[Timboc]

@floriankorsakissok

What I’d like to achieve using UITK is a layout where all elements have the same size at any given time, and they’re laid out in a grid. Each element has a min and max width.

Here’s what I’m thinking:

When shrinking the parent container, first the columns will just shrink:

Then, when the children’s min width is reached, the number of columns is reduced:

It seems very difficult to achieve using the current flexbox model. If I simply add child elements with a min and max width, all with the same fixed height, set the container to wrap sub-elements, it will not achieve what I want. All items in a given row will have the same width alright, but different rows can set different widths for their children:

The only solution I see with the current feature set is to implement a custom VisualElement class, which places its children using absolute coordinates (i.e. bypassing the flexbox model entirely) upon geometry change, and implementing the logic in C#. It defeats the purpose of having a layout engine in the first place.

Any idea of how I could achieve this in a nice way? Are there planned modifications to UITK that would make this easier?

In your last image - one work around is to include invisible objects. On geometry event, divide width by min width to find number of elements and make sure you have exactly eg 6 elements in that example, setting the last element’s opacity to 0.

We have something that works like this. We have a wrapper around ListView so we get virtualisation and then mirror a lot of the api eg onSelectItems, itemSources etc.
Essentially, when a source is set and/or when the geometry changes, split the list into n column lists. Fill each column, create ‘n’ number of ListViews and set their itemSources properties appropriately. It works pretty well. I do wonder if the multi list view available in 2022 might also do what you need?