CSS Grid: How to make a variable number of columns fill remaining space

The <page-header> and <page-footer> stretch across a variable number of <page-panel> columns using...

page-header,
page-footer {
  grid-column: 1 / -1;
}

This line of CSS is auto generating columns based off of the fixed 200px width.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

How to change 200px to a variable width to stretch to fill up remaining space without wrapping the columns and without adding extra markup like a parent element?

auto, auto-fit, auto-fill, 1fr, 100% all make the columns into full width rows which is undesirable.

Ideas/suggestions/solutions are welcome.

Thank you much!

CodePen: https://codepen.io/dragontheory/pen/MWOKpNr

HTML:

<page-container>
  <page-header>
    <span>HEADER</span>
  </page-header>
  <page-panel></page-panel>
  <page-panel></page-panel>
  <page-panel></page-panel>
  <page-footer>
    <span>FOOTER</span>
  </page-footer>
</page-container>

CSS:

page-container {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
page-container > * {
  display: grid;
}
page-header,
page-footer {
  grid-column: 1 / -1;
  padding: 1rem;
}
page-panel { 
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}