css grid auto flow row растянуть одну из строк
 

<style>
  body,
  html {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  /* это не работает */
  .a {
    display: grid;
    grid-auto-flow: row;
  }

  .c {
    display: grid;
    /* place-self: center stretch; */
    justify-self: stretch;
    align-self: stretch;
  }

  /* это работает */
  /* .a {
    height: 100%;
    display: grid;
    grid-template-rows: max-content 1fr max-content;
  } */
</style>

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

1) как растянуть класс .c, чтобы он был как для этого правила?

<style>
.someclass { 
  grid-template-rows: max-content 1fr max-content;
}
</style>

соответственно для grid-auto-flow: row

2) обязательно-ли указывать height: 100%, или это можно как-то по другому записать, margin: auto какой-нибудь...?

:D

<style>
  body,
  html {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .a {
    display: grid;
    height: 100%;
    grid-auto-rows: min-content 1fr min-content;
  }
</style>

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

Можно из JS высчитывать высоту для c

<style>
  body,
  html {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .a {
    display: grid;
    height: 100%;
    align-content: start;
  }
</style>

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

<script>
   const someCalculation = () => 66;
   const height = someCalculation();
   const c = document.querySelector('.c');
   c.style.setProperty('height', height);
</script>

надо именно через css grid :)