CSS Grid layout can't get layout to behave the way I want no matter what I do

Hey guys so im trying to do this assignment and one of the requirements is that it uses a grid layout in CSS so I have put together just the beginning of the page trying to get the layout to work the way I want it to and for the life of me I can't get this page to behave the way I need and it's driving me up the wall that I can't figure out what I am doing wrong or missing on this. I have looked at so many guides and sites on how to use grid and I am just not sure what I am missing. Any help is really appreciated here's my code. Edit The layout that I am aiming towards is something like this.

HTML

<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name="description" content="This is the assignment 3 web page showcasing what we have learned in COMP1223 the so far.">
<meta name="keywords" content="Assignment 3, HTML5, CSS, flexbox, grid, form, image mapping, position fixed, nav">
<meta name="author" content="Jessica">
<link href="grid.css" rel="stylesheet">
<link href="normalize.css" rel="stylesheet">
</head>

<body>


<div class="grid-container">
    <div class="grid-item">
        <aside class="hobbies">1</aside>
    </div>
    <div class="grid-item">
        <header class="intro">2</header>
    </div>
    <div class="grid-item">
        <section class="application">3</section>
    </div>
    <div class="grid-item">
        <section class="form_elements">4</section>
    </div>
    <div class="grid-item">
        <article class="tutorial">5</article>
    </div>
    <div class="grid-item">
        <footer class="image_mapping">6</footer>
    </div>
</div>

</body>

</html>

CSS

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(5 auto);
    background-color: #2196F3;
    padding: 10px;
    grid-template-areas: "hb int int" "hb app fe" "hb app fe" "tu tu tu" "im im im";
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

.hobbies {
    grid-area: hb;
}

.intro {
    grid-area: int;
}

.application {
    grid-area: app;
}

.form_elements {
    grid-area: fe;
}

.tutorial {
    grid-area: tu;
}

.image_mapping {
    grid-area: im;
}

Solution

the problem is that you are assigning the grid-areas to the 'aside', 'header' and stuff, while you should be assigning the same grid-areas to the div's that are containing them.

One tip, if you are going to use 'aside' and stuff, you should not put them into div's because div and aside do the same thing, they group content.

I will leave how i would do that assignament so maybe it will helps you in the future:

.grid-container {
  display: grid;
  grid-template-areas:
    "hb int int"
    "hb ma ma"
    "ar ar ar"
    "im im im";
  /*I give the rows and columns a size just for comfort, but you can use '1fr'*/
  grid-template-rows: repeat(5, 100px);
  grid-template-columns: repeat(3, 100px);
  background-color: #2196F3;
  padding: 10px;
}

.grid-item,  .grid-main-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px;
  font-size: 30px;
  text-align: center;
}

/*I use id's to be more specific in wich thing i want to assign wich grid-area*/

#hobbies {
  grid-area: hb;
}

#intro {
  grid-area: int;
}

#tutorial {
  grid-area: ar;
}

#image_mapping {
  grid-area: im;
}


/* main container to have that 2 section's inside another block*/
#main-container {
  grid-area: ma;
  display: grid;
  grid-template-areas:
    "app frm"
    "app frm";
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
    /*you can put padding: 0; so the main container is invisible*/
}

#application {
  grid-area: app;
}

#form_elements {
  grid-area: frm;
}

<div class="grid-container">

    <header class="grid-item" id="intro">2</header>

    <aside class="grid-item" id="hobbies">1</aside>

  <main class="grid-item" id="main-container">
    <section class="grid-main-item" id="application">3</section>

    <section class="grid-main-item" id="form_elements">4</section>

</main>
    <article class="grid-item" id="tutorial">5</article>
  

    <footer class="grid-item" id="image_mapping">6</footer>

</div>