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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS网格区域根据内容推动其他区域不在适当位置相关的知识,希望对你有一定的参考价值。

因此,每当我使用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>
答案

我忘了添加:

grid-template-columns: 1fr 1fr;

以上是关于CSS网格区域根据内容推动其他区域不在适当位置的主要内容,如果未能解决你的问题,请参考以下文章

CSS网格项目相互堆叠而不是尊重网格区域[重复]

在 Gatsby 中使用带有动态内容的网格模板区域

css 如何根据显示器屏幕大小自动调整显示区域

PHP Geolocation 将用户聚集到世界区域

css 带有模板区域和媒体查询的CSS网格

css 如何根据显示器屏幕大小自动调整显示区域