在下面的代码中,为什么网格跟踪单元格在其他单元格放大时不动态缩小?
在代码片段中,如果您将鼠标悬停在任何轨迹部分上,该单元格将增长到视点的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>
发布于 2019-04-18 11:23:39
因为您在行和列定义的中都有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-auto-rows: 1fr
使用grid-template-columns: 1fr 1fr
参见下面的demo:
.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。
https://stackoverflow.com/questions/55738657
复制相似问题