title: How to have grid layout components with different cell heights in Unity
body: <p>I am trying to build a scene in my 2D game which has a panel whose elements are arranged as in this image:
  <a href="https://i.stack.imgur.com/gX6v9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gX6v9.png" alt="enter image description here"></a></p>
  
  <p>The <code>ScrollRect</code> should dynamically add rows after users provide values to the <code>InputField</code>, select an option from the <code>Dropdown</code>, and then click the <code>Button</code>. This all works fine, except that the viewable area of for the <code>ScrollRect</code> has the same vertical size as its siblings within the parent panel. </p>
  
  <p>This happens because the <code>GridLayoutGroup</code> 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 <code>ScrollRect</code>. Putting a <code>ContentSizeFitter</code> on the parent panel does not help (also, despite Unity warning against it, there is a <code>ContentSizeFitter</code> on the content of the <code>ScrollRect</code> since without one the newly added rows will not appear when scrolling).</p>
  
  <p>So my question is:</p>
  
  <p><strong><em>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?</em></strong></p>
  
  <p>Thanks!</p>