How to make a Semantic UI React grid full screen with different row heights?

Question

I am trying to make a Semantic UI React grid full screen with a particular layout.

In my component I have the following render method:

  render() {
    return (
      <Grid celled>
        <Grid.Row stretched>
          <Grid.Column width={10}>
            <p>One</p>
          </Grid.Column>
          <Grid.Column width={6}>
            <p>Two</p>
          </Grid.Column>
        </Grid.Row>

        <Grid.Row>
          <Grid.Column width={10}>
            <p>Three</p>
          </Grid.Column>
          <Grid.Column width={3}>
            <p>Four</p>
          </Grid.Column>
          <Grid.Column width={3}>
            <p>Five</p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }

The widths of the columns are correct but the heights are not. This is what the above code gives me:

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.

I have tried giving the component an id and setting that id to 100% in the style.css but the height is unchanged.

Answer 1

I don't think stretched does what you are trying to do. Read the docs on Stretched to see their example.

You can set the height of the grid to 100vh, the height of the first row to 70%, and the height of the second row to 30%. Here's a jsfiddle example I put together.

render() {
  return (
    <Grid celled padded style={{height: '100vh'}}>
      <Grid.Row style={{height: '70%'}}>
        <Grid.Column width={10}>
          <p>One</p>
        </Grid.Column>
        <Grid.Column width={6}>
          <p>Two</p>
        </Grid.Column>
      </Grid.Row>

      <Grid.Row style={{height: '30%'}}>
        <Grid.Column width={10}>
          <p>Three</p>
        </Grid.Column>
        <Grid.Column width={3}>
          <p>Four</p>
        </Grid.Column>
        <Grid.Column width={3}>
          <p>Five</p>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  );
};