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网格区域根据内容推动其他区域不在适当位置的主要内容,如果未能解决你的问题,请参考以下文章