I want to make a grid of buttons for runtime with X rows and Y columns that I populate from code.
Any recommendations on how I can do that?
I tried to look at scroll view but I don’t think I can specify the number of rows and columns.
With flexbox there are some approaches as how to make grid, for example:
If your button sizes and container are always a fixed size than it is exceptionally easy, just set flex wrap mode for main container. If you need a bit more flexibility for proper UI scaling (mobile friendly) then some works need to be done…
3 Likes
There is no built in solution to create a grid of elements as of today. All dynamic layout is done using flexbox from the css specification. Thanks Digika for the link!
You can still manually place the elements using absolute positioning. Instead of setting dimensions in pixels, it is possible to assign a percentage by creating the length using Length.Percent(value);
@SimonDufour Hi Simon, I believe UI Toolkit will be out of preview (so production-ready) in 2021.1 so I was wondering if it’s going to include any grid layout at all?
Not the person you were referring to I can answer you that easily - it wont. and even if we assume it will at some point - there are many, many years before that will happen.
Oh. And what is the reasoning behind your answer, may I ask?
This question about GRID layout came up multiple times and the answer was clear. Besides, they are using
and it is flexbox only
While I can clearly see why would the grid layout be beneficial to speed up some layout, nothing should prevent you to implement a grid without it.
I would suggest that you do not wait and ask for a more specific question if you encounter any difficulty obtaining the results you want.
There is a difference between having an existing stack that has RFC and standardized feature set and reinventing the wheel. Yes, you can do a lot of stuff with flex, but grid wouldnt exist in a first place if flex covered all possible needs and was perfect.
Besides that, GRID layout engine offers bunch of features flexbox simply cannot into and never will into by design. Is it better? That depends on your needs, but saying that you can have a drop-in replacement is disingenuous at best. I’m not saying it is critical to UTK, but it is a waste, because grid is no longer experimental, it wasnt experimental even 2-3 years ago. There was no reason to skip it when big minds at Unity had a hard thonk back then: “what layouts should we have as a base”.
3 Likes
I’m curious to hear if you come up with a solution that doesn’t require reinventing the wheel, @Digika . I am uncertain why Unity chose this particular UI framework as the basis for UI Elements/Toolkit, but I imagine it was a project of someone who happened to be familiar with yoga/Flex (but not css-grid for some reason?). It’s completely infeasible for me to develop my own custom UI controls from scratch whenever I need to implement a simple Editor feature for my team (e.g. any involving a grid). It turns a 1-week task into a several week task (or more). And it’s further complicated by the fact that the docs don’t seem to have had significant updates in years.
All I’m saying is that they played on the safe side. CSS group been advocating for GRID last few years but people stuck on less intuitive flexbox with the same superstitions - “it is more mature, more stable”. Grid was “born stable” because it was built on the foundation of flex, just addresses its shortcomings.
5 Likes
if i need to, ill probably end up writing a custom visualelement adaptation of this:
Nothing should prevent you from making a grid with floats and clears either! That’s why Bootstrap came around; part of a whole cottage industry of "grid systems" from the pre-flexbox era. It’s a question of ease-of-use not of technically possible. That’s why UI Toolkit exists at all
CSS Grid has been widely supported since 2017. 5 years. 1/6th of the web’s entire existence. Even IE 10 - TEN - supports the earlier version of the standard. Yes, flexbox is pretty powerful, but it’s just regressive for Unity to set their sights that low.
Plus UGUI’s grid is one of the most widely-mocked, absolutely horrible parts of Unity. You’d think they’d want to redeem themselves 
+1 for a grid layout
9 Likes
I occasionally want to use horizontal or grid layouts in editor window scripts, but often gave up due to not really finding a way that’s easy to use in code.
But eventually this gave me some hints: UI Toolkit items scrollable grid using a ScrollView
I am looking for a dynamically filled GridView for lots of items (like ListView is filled dynamically).
Did someone already create such a component? I would pay some bucks for this.
1 Like
@achimmihca there’s one in App UI package
https://docs.unity3d.com/Packages/com.unity.dt.app-ui@1.1/api/Unity.AppUI.UI.GridView.html
Looking at the API, it works like the UITK ListView with a fixed item height. You can set the items source and the binding item methods by code.
In newer versions I have seen a Masonry Grid View too, but didn’t tried it yet.
https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.0/api/Unity.AppUI.UI.MasonryGridView.html
2 Likes
Thank you for the hint!
Indeed, this looks like a GridView component that could work for me.
No idea why nobody from Unity mentioned this before, as it cleary includes useable and frequently asked components and systems. Anyway, looks like a step in the right direction. See also the App UI thread
1 Like