Why "height: fit-content;" does not fit any of its contents?

There is a div that covers one part of my page in my project. I wanna set its height to cover all of the objects that are located inside of it, so i put fit-content as its height property. But, for some reason its height is 0, although there is a header and grid in it. I tried to change to different positions and set max-content, nothing changed. Also I tried to change line-height in almost-header h1, but it seems like nothing actually works. Something similar is with grid-container, that's height is not covering the last grid-item completely, if you drop the padding. This is the code for the snippet I'm struggling with:

body{
    font: normal 100% "Sathu", sans-serif;
    background: #181818;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.secondary{
    position: absolute;
    top: 0;
    left: 0;
    height: fit-content;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
}

.almost-header{
    position: absolute;
    background-color: #181818;
    height: 20%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.almost-header h1{
    position: absolute;
    left: 5%;
    margin: 0;
    padding: 0;

    font-size: 4em; /* 64px/16px*/
    line-height: 1;
    /*width: fit-content;*/
    /*max-width: 60%;*/

    color: #FFFFFF;
    width: 90%;
    border-bottom: #FFFFFF 1px solid;
}

/*#break-line{*/
/*    position: absolute;*/
/*    width: calc(100% - 2*70px);*/
/*    height: 5px;*/
/*    left: 70px;*/
/*    top: 9vh;*/
/*    background: #FFFFFF;*/
/*}*/

.grid-container{
    box-sizing: border-box;
    position: absolute;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 15%;
    padding-top: 0%;
    display: grid;
    column-gap: 1%;
    row-gap: 1%;
    width: 100%;
    height: fit-content;
    margin: 0;
    top: 20%;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    border-bottom: white 1px solid;
}

.grid-item{
    width: 100%;
    height: 100%;
    transition: .5s;
}

.grid-item:hover{
    box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}

.grid-item-image{
    width: 100%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-item-image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.grid-item-footer{
    box-sizing: border-box;
    padding: 5px;
    top: 0;
    margin: 0;
    height: 15%;
    background-color: #E6E6E6;
}

.grid-item-footer p{
    color: #333333;
    line-height: 1;
}

.footer-city{
    margin: 0;
    margin-bottom: 10px;
    font-style: normal;
    font-weight: 800;
    font-size: 2em;
    line-height: 38px;

    color: #333333;
    /*margin-bottom: 5px;*/
}

.footer-author-date{
    margin: 0;
    font-family: 'Barlow', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125em;
    line-height: 22px
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href= "styles.css">
</head>
<body>
<div class="secondary">
    <div class="almost-header">
        <h1 id="save-cities">
            Check this out:
        </h1>
    </div>
    <div class="grid-container">
        <div class="grid-item" id="grid-item0">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item1">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item2">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item3">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item4">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item5">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item6">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
        <div class="grid-item" id="grid-item7">
            <div class="grid-item-image">
                <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
            </div>
            <div class="grid-item-footer">
                <p class="footer-city">Something</p>
                <p class="footer-author-date">01.01.1971</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Solution

Here is some refactoring. Less CSS is always more 🙂

Your gap of 1% was causing the height issue, I don't know grid well enough to explain why.

* {
  box-sizing: border-box;
}

body {
  background: #181818;
}

header {
  background-color: #181818;
  min-height: 20%;
  display: grid;
  place-content: center;
}

h1 {
  font-size: 4em;
  margin: 0;
  color: white;
  border-bottom: white 1px solid;
}

main {
  padding: 5%;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  border-bottom: white 1px solid;
}

.grid-item:hover {
  box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}

.grid-item img {
  display: block;
  width: 100%;
}

.grid-item footer {
  padding: 5px;
  color: #333333;
  background-color: #E6E6E6;
}

.footer-city {
  margin-bottom: .6em;
  font-weight: 800;
  font-size: 2em;
}

.footer-author-date {
  font-weight: 500;
  font-size: 1.125em;
}

<header>
  <h1 id="save-cities">
    Check this out:
  </h1>
</header>
<main>
  <article class="grid-item" id="grid-item0">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item1">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item2">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item3">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item4">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item5">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item6">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
  <article class="grid-item" id="grid-item7">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
    <footer>
      <p class="footer-city">Something</p>
      <p class="footer-author-date">01.01.1971</p>
    </footer>
  </article>
</main>