CSS Grid Holy Grail が HTML 列に注意を払わない

2 つの端の間のスペースを埋めるように引き伸ばされる可変数の固定幅と可変幅の HTML 列を使用して、ホーリー グレイル レイアウトを試みます。

以下の CSS では、2 つの端の間のスペースを埋める可変数の固定幅と可変幅の HTML 列を使用できます…

*:before,
*：後、
*、
：：後、
：：前 {
  ボックスサイズ: ボーダーボックス;
}

体 {
  パディング: 0;
  マージン: 0;
  オーバーフロー: 非表示;
}

アプリコンテナ {
  grid-template-columns: 200px repeat(auto-fit, minmax(1rem, 1fr));
  表示: グリッド;
  グリッドギャップ: 1rem;
  背景色: ベージュ;
  パディング: 1rem;
  オーバーフロー: 非表示;
}

アプリパネル {
  背景: インディアンレッド;
  最小高さ: 5rem;
}

app-panel:last-of-type {
  グリッド列: -1;
  幅: 200px;
}

... しかし、最初と最後の型の が grid-column: 1 / -1; (ヘッダーとフッターの聖杯レイアウト)、グリッドは中央の HTML 列を無視し、代わりにできるだけ多くのグリッド列を追加して残りのスペースを埋めます。

なぜそうするのですか?また、グリッドが列を埋めるのではなく、中央の列を伸ばし続けて残りのスペースを埋める方法は?

ありがとうございます!

*:before,
*：後、
*、
：：後、
：：前 {
  ボックスサイズ: ボーダーボックス;
}

体 {
  パディング: 0;
  マージン: 0;
  オーバーフロー: 非表示;
}

アプリコンテナ {
  grid-template-columns: 200px repeat(auto-fit, minmax(1rem, 1fr));
  grid-template-rows: auto 1fr auto;
  表示: グリッド;
  高さ: 100vh;
  グリッドギャップ: 1rem;
  背景色: ベージュ;
  パディング: 1rem;
  オーバーフロー: 非表示;
}

アプリパネル {
  背景: インディアンレッド;
  最小高さ: 3rem;
}

app-panel:last-of-type,
app-panel:first-of-type {
  グリッド列: 1 / -1;
}

元の変更されたコード スニペット:

組み合わせる単一の「grid-template-columns」内の「auto-fit」と固定幅の列で「繰り返し」

少しハックですが、grid-row を使って要素を配置し、幅を調整して全幅の動作をシミュレートできます

body {
  マージン: 0;
}

アプリコンテナ {
  grid-template-columns: 200px repeat(auto-fit, minmax(1rem, 1fr));
  grid-template-rows: auto 1fr auto;
  表示: グリッド;
  高さ: 100vh;
  グリッドギャップ: 1rem;
  背景色: ベージュ;
  パディング: 1rem;
  ボックスサイズ: ボーダーボックス;
  オーバーフロー: 非表示;
}

アプリパネル {
  背景: インディアンレッド;
  最小高さ: 3rem;
  グリッド行: 2;
}

app-panel:nth-last-of-type(2) {
  グリッド列: -1;
  幅: 200px;
}

app-panel:first-of-type {
  グリッド行: 1;
  幅: 計算 (100vw - 2em);
}
app-panel:last-of-type {
  グリッド行: 3;
  幅: 計算 (100vw - 2em);
}