Why do most of my elements get jumbled at the top of the css grid?-CodePudding

Included a rough wire-frameThe only part of this grid that works as predicted is the main <main>, which takes up 50% of the page towards the middle. Everything else more or less gets jumbled at the top, separated by my columns. But #copy, for example is set to use the last row, similar with .performance etc... Why do my elements get jumbled towards the top of the page?

body {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(4, 1fr) 50% 1fr 25% .5fr .5fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.title h1 {
  border: red solid;
  text-align: center;
  grid-area: 2 / 2 / 3 / 3;
}

nav {
  border: blueviolet solid;
  grid-area: 2 / 3 / 3 / 4;
}

main {
  text-align: center;
  border: green solid;
  grid-area: 5 / 1 / 6 / 4;
}

.title h3 {
  border: rgb(94, 255, 0) solid;
  text-align: center;
  grid-area: 3 / 2 / 4 / 3;
}

.composition {
  grid-area: 7 / 1 / 8 / 2;
  border: saddlebrown solid;
}

.performance {
  grid-area: 7 / 2 / 8 / 3;
  border: rgb(19, 139, 89) solid;
}

.production {
  grid-area: 7 / 3 / 8 / 4;
  border: rgb(39, 122, 128) solid;
}

#copy {
  grid-area: 9 / 1 / 10 / 2;
  border: rgb(188, 29, 149) solid;
}

#garbage {
  /*grid-area: 9 / 3 / 10 / 4;*/
  grid-row-start: 9;
  grid-row-end: 10;
  grid-column-start: 3;
  grid-column-end: 4;
  border: rgb(29, 175, 188) solid;
}

<header>
  <div >
    <h1>Austin Kleyn</h1>
    <h3>Pianist and Composer</h3>
  </div>
</header>

<nav>
  <ul>
    <li>
      <a href="#">
        <h4>About</h4>
      </a>
    </li>
    <li>
      <a href="#">
        <h4>Music</h4>
      </a>
    </li>
    <li>
      <a href="#">
        <h4>Contact</h4>
      </a>
    </li>
  </ul>
</nav>

<main>
  <div >
    <h2>Piano Perfection</h2>
    <p>Delivering quality piano soundtracks and backing tracks</p>
  </div>

</main>

<div >
  <div >
    <h3>Composition</h3>
  </div>
  <div >
    <h3>Performance</h3>
  </div>
  <div >
    <h3>Production</h3>
  </div>

</div>

<footer>
  <div id="copy">
    Copyright 2022 AK
  </div>
  <div id="garbage">
    Made in the Garbage State
  </div>
</footer>

CodePudding user response：

It´s because grid is applied only to direct children of the element. In your case, display: grid is set only on the body so only its direct children are affected.