Grid area do not adapt to the container height-CodePudding

body {
    font-family: 'Rubik', sans-serif;

    .container {
        background: red;
        width: 80%;
        height: 60%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    //Grid
    display: grid;
    grid-template-rows: repeat(2,1fr);
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    grid-template-areas: 
    "report  work  play  study"
    "report  exercise  social  selfcare";

    report{
    grid-area:report;
    }

    work-container{
    grid-area:work;
    }   

    play-container{
    grid-area:play;
    }
    
    study-container{
    grid-area:study;
    }

    exercise-container{
    grid-area:exercise;
    }

    social-container{
    grid-area:social;
    }

    selfcare-container{
    grid-area:selfcare;
    }




}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="/css/stylesDesk.css">
  <link rel="stylesheet" href="normalize.css">
  <script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>

  <title>Frontend Mentor | Time tracking dashboard</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet