我正在尝试制作一个单页面的React应用程序，该应用程序将占据所有浏览器的整个视窗。（我目前关注的是桌面，不打算在移动的上使用。）为此，我希望我的应用程序组件占据整个页面。
我的申请：

import './App.css';
import { MyCalendar } from "./Components/MyCalendar"

function App() {
  return (
    <div className="grid-container">
      <p className="paragraph">Left-side placeholder</p>
      <MyCalendar className="mycalendar" />
    </div>
  );
}

export default App;

App.css

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 10px;
  height: 100%; width: 100%;
}

.paragraph {
  text-align: center;
}

.mycalendar {
  height: 100%; width: 100%;
  text-align: center;
}

我把这个放到一个沙盒here中。
在这篇文章被标记为重复之前，我已经看到有几个人提出了同样的问题。不幸的是，我无法从他们的回答中解决我的问题。下面是我看过的几个问题：
1.这些答案要么看起来不相关（例如，删除不在我的代码中的position），要么对我不起作用（例如，将body设置为height: 100vh，将其他所有内容设置为height: 100%）。

1. Link。最好的答案是使用flexbox，我希望使用网格。
2. Link。使用height: 100vh，它不适合我。
   应用程序的一些背景：该应用程序使用网格来格式化两个主要组件：左侧为占位符，右侧为日历。我希望占位符占宽度的25%，日历占其余部分。如果页面下方没有内容，我希望这两个组件延伸到页面底部。
   对我来说，最有意义的方法是将主体设置为height: 100vh; width: 100 vw;，并根据百分比来布局剩余的组件。
   有人知道我哪里做错了吗？