Why the height of the internal items of my div display grid is not working?

I'm trying to give a height of 30% and 70% to the items inside of a container div with a display grid which has a height of 100%, but the height of the internal items does not respect the percentages given. I already read CSS Grid, grid item "height... but even if I put the height of the container at 100% the internal items keep not matching. Here is my code:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  div {
    display: grid;
  }
  body {
    background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
    color: #fff;
    font-family: Montserrat, sans-serif;
  }

  .widget-container {
      width: 50vw;
      height: 60vh;
      background: rgba(22,23,33,.75);
      border: 1px solid rgba(96,125,139,.25);
      border-radius: 1rem;
      box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
      padding: 2rem 2rem;
  }
  .widget-sub-container {
    width: 100%;
    display: grid;
    border: dotted 3px green;
    height: 100%;
  }
  .pre-sale-top-row {
    width: 100%;
    border: dotted 2px blue;
    justify-items: center;
    height: 30%;
  }
  .pre-sale-bottom-row{
    border: dotted 2px blue;
    height: 70%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/presale.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Document</title>
</head>
<body>
    <div class="widget-container">
        <div class="widget-sub-container">

            <div class="pre-sale-top-row">
                <h1>Pre-Sale</h1>
                <h2>countdown</h2>
                <h3>amount</h3>
            </div>

            <div class="pre-sale-bottom-row">
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>

Solution

Use display: table-cell;

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

div {
    display: grid;
}

body {
    background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
    color: #fff;
    font-family: Montserrat, sans-serif;
}

.widget-container {
    width: 50vw;
    height: 60vh;
    background: rgba(22,23,33,.75);
    border: 1px solid rgba(96,125,139,.25);
    border-radius: 1rem;
    box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
    padding: 2rem 2rem;
}

.widget-sub-container {
    width: 100%;
    display: grid;
    border: dotted 3px green;
    height: 100%;
    display: table-cell;
}

.pre-sale-top-row {
    width: 100%;
    border: dotted 2px blue;
    justify-items: center;
    height: 30%;
}

.pre-sale-bottom-row{
    border: dotted 2px blue;
    height: 70%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/presale.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Document</title>
</head>
<body>
    <div class="widget-container">
        <div class="widget-sub-container">

            <div class="pre-sale-top-row">
                <h1>Pre-Sale</h1>
                <h2>countdown</h2>
                <h3>amount</h3>
            </div>

            <div class="pre-sale-bottom-row">
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>