gpt4 book ai didi

html - 当其他轨道增长时,CSS 网格的轨道不会收缩

转载 作者:可可西里 更新时间:2023-11-01 12:54:52 25 4
gpt4 key购买 nike

<分区>

为什么在下面的代码中,当其他单元格放大时,网格轨道单元格没有动态收缩?

在代码片段中,如果您将鼠标悬停在任何轨道部分上,该单元格会增长到视点的 75%,但是网格的其他部分不会收缩以适应新大小的部分,它们都保持其原始大小,从而导致单元格扩展到超出网格的大小。

我想创建可以调整大小的网格部分,方法是将鼠标悬停在它们上面,同时缩小网格的其他部分以适应新的大小。

有没有办法做到这一点,更重要的是,为什么我的代码不起作用?

.grid--container {
height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid red;
}

.track--section {
border: 1px dotted grey;
min-height: 0;
min-width: 0;
}

.track--section:hover {
background-color: #333;
height: 75vh;
width: 75vw;
}
<div class="grid--container">
<div class="track--section">section1</div>
<div class="track--section">section2</div>
<div class="track--section">section3</div>
<div class="track--section">section4</div>
</div>

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