CSS Grid: Make grid row fill the screen, pushing next rows offscreen

Is there a way to do this through pure HTML/CSS? This is what I want to accomplish:

|---------------------------| <-- start of screen
|          header           |   fixed height
|---------------------------|
|                           |
|                           |
|          content          |   fill screen
|                           |
|                           |
|---------------------------| <-- end of screen
|          footer           |   auto
|---------------------------|

Some stuff I've seen but doesn't answer my question:

CSS grid let an item take the rest of available screen space

How to make CSS Grid with fixed header and footer with remainder in middle

How to make CSS Grid items take up remaining space?

Here's what I have so far (image)

body {
    width: 100%;
    min-height: 100%;
    margin: 0 0 0 0;
    background-color: gray;
}

.app-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header header"
        "contnt contnt contnt contnt"
        "footer footer footer footer"
    ;

    height: 100vh;
    width: 100%;
}

.header {
    grid-area: header;
    background-color: lightcoral;
}

.content {
    grid-area: contnt;
    background-color: aqua;
}

.footer {
    grid-area: footer;
    background-color: lightyellow;
}

<body>
    <div class="app-wrapper">
        <div class="header">
            header
        </div>
        <div class="content">
            content
        </div>
        <div class="footer">
            footer
        </div>
    </div>
</body>

Solution

Make the last row equal to 0 and also define a height on the footer to override the effect of 0

body {
  margin: 0;
  background-color: gray;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr 0; /* 0 for the last row */
  height: 100vh;
}

.header {
  background-color: lightcoral;
}

.content {
  background-color: aqua;
}

.footer {
  background-color: lightyellow;
  height: min-content; /* overide the 0 of the row */
}

<body>
  <div class="app-wrapper">
    <div class="header">
      header
    </div>
    <div class="content">
      content
    </div>
    <div class="footer">
      footer
    </div>
  </div>
</body>