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>

Answer 1

我忘记添加：

grid-template-columns: 1fr 1fr;

CSS网格区域根据内容将其他区域推开

1 个答案: