Grid height problems

HTML-CSS
1

Hey everyone. I can’t seem to be able to control the height of my rows efficiently. I’ve set 1fr for 6 columns which has remedied the problem of the rows resizing when the height of the page increases. But now the footer height increases along with the page height. How can I fix this? Thanks.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Guzo Lemine</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Get the cdn of all the necessary non-local files after completion -->
    
    <!-- Font Awesome CDN -->

    <!--
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    
    -->
    
    <!-- Bootstrap CDN -->
    
    <!--
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    -->

    <!-- Libraries -->
    
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="libs/fontawesome-free-5.4.1-web/css/all.css" />
    
</head>
<body>
    <header class="header">
        <h1><a href="#">Guzo Lemine</a></h1>
    </header>

    <main class="main">
        <section class="searchbar">
        <form method="GET" action="">
            <input class="searchinput icon" type="search" name="search" placeholder="What are you looking for?">
        </form>
    </section>
        <section class="thestuff">
            <img src="img/s-l500.jpg" alt="F-150 Raptor">
        </section>
    </main>

    <footer class="footer">
        <p>&copy; 2018 Guzo Lemine. All Rights Reserved.</p>
    </footer>  
</body>
</html>

CSS

/* The CDN */

/* @import url('https://fonts.googleapis.com/css?family=Exo'); */
html, body {
  width: 100%;
  height:100%;
}

@font-face {
  font-family:Exo;
  src:url(exo/Exo-Regular.ttf);
}
* {
  box-sizing: border-box;
  font-family:Exo;
}

.header {grid-area: header;}
.main {grid-area: main;}
.footer {grid-area: footer;}

body {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'main main main main main main'
  'footer footer footer footer footer footer';
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0;
  text-align: center;
  grid-gap: 10px;
}

a {
  text-decoration: none;
  color: black;
}

/* header */

header {
  grid-column: 1 / span 6;
  grid-row: 1;
  padding: 14px 16px;
  align-content: center;
  border-bottom: 1px solid black;
}

h1 {
  font-size: 17px;
  font-weight: normal;
  margin: 0;
}

/***********************************/

main {
  display: grid;
  grid-column: 1 / span 6;
  grid-row: 2;
  width: 100%;
  height: 100%;
}

.searchbar {
  grid-column: 1 / span 6;
  grid-row: 1;
  padding: 10px;
}

.searchinput {
  border: 1px solid black;
}

input.icon[type="search"] {
  width:100%;
  height:20px;
  box-sizing:border-box;
  border:2px solid #ccc;
  border: radius 4px;
  font-size:16px;
  background-color:white;
  background-image:url('/libs/fontawesome-free-5.4.1-web/svgs/solid/search.svg');
  background-size:15px 15px;
  background-position:10px center;
  background-repeat:no-repeat;
  padding:12px 20px 12px 40px;
}

.thestuff {
  grid-column: 2 / span 4;
  grid-row: 2;
  width: 100%;
  border: 1px solid black;
  padding: 2px 16px;
}

.thestuff img {
  width: 100%;
  max-width: 100%;
}













/* footer */

footer {
  display:grid;  
  grid-column: 1 / span 6;
  grid-row: 3;
  align-content: center;
  height:60px;
  border-top: 1px solid black;
  bottom: 0;
}