Question Grid Layout Group equivalent in UI Toolkit

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:
https://css-tricks.com/dont-overthink-flexbox-grids/

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..

 

@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
https://github.com/facebook/yoga
and it is flexbox only

 

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".

 

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.

 

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

 

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: https://forum.unity.com/threads/ui-toolkit-items-scrollable-grid-using-a-scrollview.1357781/