CSS网格区域根据内容推动其他区域不在适当位置

Question

因此，每当我使用CSS网格开始一个新项目时，我似乎都会遇到此问题，即 - 1个网格区域根据内容大小推送另一个较小的网格区域。

我过去做过，但不记得我是怎么把它拉下来的。有人可以帮我这个吗？

body 
  background-color: #292929;
  /*#333333 is a lighter charcoal color go to https://encycolorpedia.com/333333 to play around with shades*/
  font-family: Acme;
  color: white;


* 
  box-sizing: border-box;



/*Main Grid Container*/

#main-grid 
  display: grid;
  grid-template-areas: 'calendar calendar displaylist displaylist'



/*Child of Main Grid Container*/

#calendarFavs 
  grid-area: calendar;


#displayedList 
  grid-area: displaylist;

<body>

  <h1>Hello World</h1>

  <div id='main-grid'>
    <!--Calendar grid containers and its children -->
    <div id='calendarFavs'>
      <h1>Calendar</h1>
    </div>
    <!-- End of calendar grid containers and its children -->

    <div id='displayedList'>
      <h1>List</h1>
    </div>

  </div>
</body>