How do I determine grid size based on element contents?

Question

Learning CSS and I need a little help:

Right now, each row is one size and I'd like each individual grid area's height to be determined by its contents. If I set the margin to a negative number, I can get the results I want but it doesn't scale properly and I know that's incorrect.

Basically, I'd like each grid area to act as an individual cell with the row height to be adjusted in different columns.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap');
html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

a {
  color: rgba(15, 15, 15, 100);
  text-decoration: none;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12;
  background-color: whitesmoke;
  color: rgba(15, 15, 15, 100);
  font-weight: 300;
  margin: 0 25px;
}

code {
  font-family: 'Nanum Gothic Coding', monospace;
}

aside {
  color: whitesmoke;
  font-style: italic;
  text-align: right;
  font-size: 12pt;
  margin: -7.5rem 10px 2rem 0;
}

nav {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.nav-item {
  display: flex;
  list-style-type: none;
  padding: 0.5em 1.75em;
  align-items: center;
  margin: 0 auto;
  border: 1px solid rgba(25, 25, 25, 100);
  border-radius: 0.5rem;
}

h1 {
  color: whitesmoke;
  font-size: 80pt;
  font-family: 'Playfair Display', serif;
  margin: 2rem 0 2rem 0;
  text-align: left;
  background-color: rgba(25, 25, 25, 100);
  padding-left: 10px;
}

h2 {
  margin-top: 3rem;
  font-family: 'Playfair Display', serif;
  border-bottom: thin solid darkred;
}

h3 {
  margin: 20px 0 0 0;
}

h4 {
  margin: 0px;
}

.grid-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-column-gap: 2rem;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "a b" "c d" "e f" "g h";
}

#summary {
  grid-area: a;
}

#work {
  grid-area: c;
}

#education {
  grid-area: e;
}

#skills {
  grid-area: g;
}

#contact {
  grid-area: b;
}

#abilities {
  grid-area: d;
}

#interests {
  grid-area: f;
}

.location {
  display: inline flex;
  text-align: right;
  float: right;
  margin-top: -1.75rem;
}

.location,
#contact h4 {
  font-weight: 100;
}

.offset {
  margin: 0 0 0 2.5rem;
}

ul {
  margin-top: 0;
}

<nav>
  <ul class="nav-item"><a href='#work'>Work</a></ul>
  <ul class="nav-item"><a href='#education'>Education</a></ul>
  <ul class="nav-item"><a href='#skills'>Skills</a></ul>
  <ul class="nav-item"><a href='#contact'>Contact</a></ul>
  <ul class="nav-item"><a href='#interests'>Interests</a></ul>
</nav>

<header>
  <h1>Name Header</h1>
  <aside>Uneducated Web Developer</aside>
</header>

<main class="grid-container">
  <section id="summary" class="grid item1">
    <h2 class="section-title">Brief</h2>
    <p>At tellus at urna condimentum mattis pellentesque id. Semper eget duis at tellus at urna condimentum mattis. Platea dictumst vestibulum rhoncus est pellentesque elit. Eget sit amet tellus cras adipiscing enim eu turpis. Risus sed vulputate odio ut
      enim blandit volutpat. Et egestas quis ipsum suspendisse ultrices. Elementum facilisis leo vel fringilla. Vitae aliquet nec ullamcorper sit amet risus. Condimentum mattis pellentesque id nibh. A iaculis at erat pellentesque adipiscing commodo elit.
      Sem integer vitae justo eget magna fermentum iaculis eu.</p>
  </section>

  <section id="work" class="grid item2">
    <h2 class="section-title">Work Summary</h2>
    <h3>Company, Inc.</h3>
    <h4 class="location">Location, USA. <br> 2021</h4>
    <div class="offset">
      <h4>Title</h4>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Odio euismod lacinia at quis risus. Faucibus interdum posuere lorem ipsum.</li>
      </ul>
    </div>
    <h3>Corporation, LLC.</h3>
    <h4 class="location">Anytown, USA. <br> Since 1901</h4>
    <div class="offset">
      <h4>Position Title</h4>
      <ul>
        <li>Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.</li>
        <li>Egestas diam in arcu cursus euismod quis viverra nibh cras.</li>
      </ul>
    </div>

  </section>

  <section id="education" class="grid item3">
    <h2 class="section-title">Education</h2>
  </section>

  <section id="skills" class="grid item3">
    <h2 class="section-title">Skills</h2>
  </section>

  <section id="contact" class="grid item5">
    <h2 class="section-title">Contact</h2>

  </section>

  <section id="abilities" class="grid item6">
    <h2 class="section-title">Abilities</h2>
  </section>

  <section id="interests" class="grid item7">
    <h2 class="section-title">Interests</h2>
    <ul>
      <li>Item</li>
      <li>Item2</li>
    </ul>
  </section>
</main>