gpt4 book ai didi

html - CSS 网格区域根据内容将其他区域推离位置

转载 作者:行者123 更新时间:2023-11-28 00:12:07 24 4
gpt4 key购买 nike

因此,每次我开始使用 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;

关于html - CSS 网格区域根据内容将其他区域推离位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55331289/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com