How do I prevent fractional grids from resizing?

<!DOCTYPE html>
<html>
<head>
    <title>Making a Shop Landing Page</title>
</head>
<style>
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
.container{
    display:grid;
    grid-template-areas:
        "header header header"
        "ads main main"
        "footer footer footer";
    border:orange solid 10px;
    height:100vh;
    width:100%;
    grid-template-rows:1fr 5fr 1fr;
}
.grid-item{
    border:black solid 3px;
}
.header{
    grid-area:header;
}
#header{
    text-align:center;
    position:relative;
    bottom:-60px;
}
.ads{
    grid-area:ads;
}
.main{
    grid-area:main;
    height:100%;
}
.footer{
    grid-area:footer;
}
#navbar {
      height: 40px;
        width: 100%;
          position: fixed;
            top: 0;
          left: 0;
            background-color: #EAEAFF;
              padding: 0;
                margin: 0;
}
</style>
    <body>
        <div id="navbar">
            <ul>
                <li><a href="#">Halp</a></li>
                <li><a href="#">Me</a></li>
                <li><a href="#">PLS</a></li>
            </ul>
        </div>
        <div class="container">
            <div class="header grid-item">
                <h1 id="header">This is the Title</h1>      
            
            </div>
            <div class="ads grid-item"></div>
            <div class="main grid-item">
                <p>waodnawdsoawnhdsoawndoawdnawodsnawoudsnaswoudsnswaondawoudsaswn</p>  
            </div>
            <div class="footer grid-item"></div>
        </div>





    </body>
</html>

I'm trying to make it so that when I put text in the main div it doesn't affect the walls of the divs and instead just stays in place. I'm having a hard time as I'm very new to html/css or grid but I would like to use grid in a lot of my projects.I notice it's very easy to set up and it's helped me in a lot of situations but this time I barely know what to do in this case.