为什么在下面的代码中，当其他单元格放大时，网格轨道单元格没有动态收缩？
在代码片段中，如果您将鼠标悬停在任何轨道部分上，该单元格会增长到视点的 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>
因为您在行和列定义中都有1fr，所以水平和垂直空间受限 - 所以它们将由网格元素平均共享。尝试将行和列的设置都更改为 auto，您会发现一切正常，但还不完美 - 请注意 悬停的 周围有空格 网格元素:
.grid--container {
height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
display: grid;
grid-template-columns: auto auto; /* changed */
grid-template-rows: auto auto; /* changed */
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>
解决方案
你可以试试这个:
- 使用
grid-template-columns: 1fr 1fr 的 2 列布局
- 隐式行为此使用
grid-auto-rows: 1fr
请看下面的演示:
.grid--container {
height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns */
grid-auto-rows: 1fr; /* implicit rows */
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>
您可以在此处阅读有关显式和隐式网格的更多信息:CSS Grid unwanted column added automatically .