Adjusting rows to content height in dynamic height grid

Question

I want to create a web page with CSS Grid Layout.

I am facing an issue regarding the height of the rows.

I want each row's height to adjust as per content.

Right now the height is static. If there is no content then a lot of free space is shown. Is there a way to handle this?

I want the results in these screenshots:

also

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: arial;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 40px auto 40px;
  grid-template-areas: "header  header  header" "content content content" "footer  footer  footer";
  grid-gap: 5px;
}

header {
  grid-area: header;
  background-color: black;
  color: white;
  padding: 10px;
}

footer {
  grid-area: footer;
  background-color: black;
  color: white;
  padding: 10px;
}

.container {
  grid-area: content;
  display: grid;
  grid-template-columns: 820px 1fr;
  grid-template-rows: 480px 213px;
  grid-gap: 5px;
  padding: 0 5px;
}

.grid-item-1 {
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #009036;
  grid-area: 1 / span 1 / 1 / span 1;
}

.grid-item-2 {
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #772164;
  grid-area: 2 / span 1 / 2 / span 1;
}

.grid-item-3 {
  color: #fff;
  text-align: center;
  background-color: #C91B18;
  grid-area: 1 / 2 / span 3 / span 3;
}

<section class="wrapper">
  <header>Header</header>
  <div class="container">
    <div class="grid-item-1">This row height fit according data. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-2">
      This row height fit according data. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-3">3</div>
  </div>
  <footer>Footer</footer>
</section>

Answer 1

For the two content items, use min-content for each row. This will size each row based on a "shrink-to-fit" algorithm.

To give the right column full height, add an empty implicit row.

body {
  margin: 0; font-family: arial;
}
* { box-sizing: border-box; }

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 40px 1fr 40px;
  grid-gap: 5px;  
  grid-template-areas: "header  header  header" 
                       "content content content"
                       "footer  footer  footer";

}

header {
  grid-area: header;
  background-color: black;
  color: white;
  padding: 10px;
}

footer {
  grid-area: footer;
  background-color: black;
  color: white;
  padding: 10px;
}

.container {
  grid-area: content;
  display: grid;
  grid-template-columns: 820px 1fr;
  grid-template-rows: min-content min-content; /* shrink-to-fit */
  grid-gap: 5px;
  padding: 0 5px;
  grid-template-areas: "green red" 
                       "purple red"
                       "   .    red"; /* implicit row; for red's full height */

}

.grid-item-1 {
  grid-area: green;
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #009036;
}

.grid-item-2 {
  grid-area: purple;
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #772164;
}

.grid-item-3 {
  grid-area: red;
  color: #fff;
  text-align: center;
  background-color: #C91B18;
}

<section class="wrapper">
  <header>Header</header>
  <div class="container">
    <div class="grid-item-1">This row height fit according data.
      <br>
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-2">
      This row height fit according data.
      <br>
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-3">3</div>
  </div>
  <footer>Footer</footer>
</section>