Make grid's child elements with flexible width

Unity Engine
1

Hi guys…

I have this structure:

-Grid layout panel
–Word
–Word2
–Word3
–Word4

It looks like this:

So the grid works, that’s fine… But how do I make the child elements with flexible width? For example as you can see the shorter words like me, he are not in the center and the word “a woman” is out of box because the text is too long and the grid makes all boxes fixed width… Anyway to automatically make flexible width on longer boxes?

Thanks for help!

2

@kaplica

Hi, so if one or more elements is wider than others, how would you still keep a grid layout? Just asking.

Anyway if you want to make item not be forced to grid even if it’s child object, you can do that with Layout Element, then it doesn’t line up in grid either so it doesn’t make much sense to use it.

I think you’ll have to write some own code for flexible grid, that can some how adjust width of elements based on their child item width, and then fit other “grid” items on the same line so that they adjust their width to avoid overlapping areas.

Or maybe there is some asset than can already do that.

EDIT:
Or you can use parented groups see this thread:

@**lkc2015 **has a pretty elegant solution, that way you can automatically drive width of cell by it’s child item (text).

EDIT - with little bit of work, you can get something like this done:

3

…And actually, now that I did little bit of searching, Unity has actually pretty extensive how to in manual, somehow I’ve missed it or it’s been added since I checked the UI manual :wink: - here’s the link:

http://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html

4

The content size fitter, or layout group makes sense when using with vertical or horizontal group… It doesn’t seem to work when I’m using grid though… I can’t get my head around it :confused:

5

@eses ,

How did you get such result from the video? It doesn’t seem to work for me with my setup