title: Using Material-UI how does one resize the rows of a grid component with direction = column?
body: <p>I have a material-ui page layout using grid and direction=column.  The 'height' of the rows is too big.  I can't find any info at all on how to make the rows thinner.  I've tried using a smaller font but that just makes the text smaller.  </p>
  
  <p>Here's the code:</p>
  
  <p>'''</p>
  
  <pre><code>  &lt;Grid container direction='column'&gt;
      &lt;Grid item name='PageHeader'&gt;
        &lt;NavMenu /&gt;
      &lt;/Grid&gt;
      &lt;Grid item name='PageBreadcrumb'&gt;
        &lt;Breadcrumb /&gt;
      &lt;/Grid&gt;
      &lt;Grid item container name = 'PageContent'&gt;
  
          {this.props.children}
  
      &lt;/Grid&gt;
      &lt;Grid item name='PageFooter'&gt;
      &lt;Footer /&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  </code></pre>
  
  <p>'''</p>
  
  <p>Any ideas on how to accomplish this? Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/eJqX0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eJqX0.png" alt="enter image description here"></a></p>