How to have grid layout components with different cell heights in Unity

Question

I am trying to build a scene in my 2D game which has a panel whose elements are arranged as in this image:

The ScrollRect should dynamically add rows after users provide values to the InputField, select an option from the Dropdown, and then click the Button. This all works fine, except that the viewable area of for the ScrollRect has the same vertical size as its siblings within the parent panel.

This happens because the GridLayoutGroup of the parent panel requires the child cell sizes to be specified, and if I specify a value which makes sense for the top two panels it is too short for the ScrollRect. Putting a ContentSizeFitter on the parent panel does not help (also, despite Unity warning against it, there is a ContentSizeFitter on the content of the ScrollRect since without one the newly added rows will not appear when scrolling).

So my question is:

what do I need to do to allow the vertical sizing of the children of the top level panel to be based on their sizes, when one child's vertical size will change dynamically?

Thanks!

Solution 1

For grid layout you cannot control the cell sizes dynamically . Instead you can use horizantal / vertical layout groups where you can find an option control child size . And as mentioned in above ans add Layout element to child component and adjust the sizes

Solution 2

Both @Programmer and @Salma572 answers are true. If you want that size to be a fixed number or pixels, use a LayoutElement. However, It doesn't seem you can use a scale (in percent) or anything else dynamic.

It's a shame but you'll probably need to write a script.