title: How do I prevent fractional grids from resizing?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Making a Shop Landing Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;style&gt;
  *{
      box-sizing:border-box;
      margin:0;
      padding:0;
  }
  .container{
      display:grid;
      grid-template-areas:
          &quot;header header header&quot;
          &quot;ads main main&quot;
          &quot;footer footer footer&quot;;
      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;
  }
  &lt;/style&gt;
      &lt;body&gt;
          &lt;div id=&quot;navbar&quot;&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Halp&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Me&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;PLS&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;header grid-item&quot;&gt;
                  &lt;h1 id=&quot;header&quot;&gt;This is the Title&lt;/h1&gt;      
              
              &lt;/div&gt;
              &lt;div class=&quot;ads grid-item&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;main grid-item&quot;&gt;
                  &lt;p&gt;waodnawdsoawnhdsoawndoawdnawodsnawoudsnaswoudsnswaondawoudsaswn&lt;/p&gt;  
              &lt;/div&gt;
              &lt;div class=&quot;footer grid-item&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>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.</p>