title: How to make a Semantic UI React grid full screen with different row heights?
body: <p>I am trying to make a <a href="https://react.semantic-ui.com" rel="noreferrer">Semantic UI React</a> grid full screen with a particular layout.</p>
  
  <p><a href="https://i.stack.imgur.com/IY0aP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IY0aP.png" alt="enter image description here"></a></p>
  
  <p>In my component I have the following render method:</p>
  
  <pre><code>  render() {
      return (
        &lt;Grid celled&gt;
          &lt;Grid.Row stretched&gt;
            &lt;Grid.Column width={10}&gt;
              &lt;p&gt;One&lt;/p&gt;
            &lt;/Grid.Column&gt;
            &lt;Grid.Column width={6}&gt;
              &lt;p&gt;Two&lt;/p&gt;
            &lt;/Grid.Column&gt;
          &lt;/Grid.Row&gt;
  
          &lt;Grid.Row&gt;
            &lt;Grid.Column width={10}&gt;
              &lt;p&gt;Three&lt;/p&gt;
            &lt;/Grid.Column&gt;
            &lt;Grid.Column width={3}&gt;
              &lt;p&gt;Four&lt;/p&gt;
            &lt;/Grid.Column&gt;
            &lt;Grid.Column width={3}&gt;
              &lt;p&gt;Five&lt;/p&gt;
            &lt;/Grid.Column&gt;
          &lt;/Grid.Row&gt;
        &lt;/Grid&gt;
      );
    }
  </code></pre>
  
  <p>The widths of the columns are correct but the heights are not. This is what the above code gives me:</p>
  
  <p><a href="https://i.stack.imgur.com/SPk14.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SPk14.png" alt="enter image description here"></a></p>
  
  <p>How do I stretch the top row to fit 70% of the screen and the bottom the remaining 30%? Or how can I set the top row to 600px and the bottom row the remainder of the screen? Either way would be ok with me.</p>
  
  <p>I have tried giving the component an id and setting that id to 100% in the style.css but the height is unchanged.</p>