css 轨道,html-当其他轨道增加时,CSS网格的轨道不会缩...
由于行和列定義中都包含1fr,因此水平和垂直空間受到限制-因此網格項目將平均共享它們.嘗試將其更改為自動用于行和列,您可以看到一切正常,但還不完美-請注意,懸停的網格項周圍存在空格：
.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;
}
section1section2section3section4解
您可以嘗試以下方法：
>使用grid-template-columns的2列布局：1fr 1fr
>使用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;
}
section1section2section3section4總結
以上是生活随笔為你收集整理的css 轨道,html-当其他轨道增加时,CSS网格的轨道不会缩...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 中有行号吗_重置SQLite
- 下一篇： css div滚动_如何使用CSS创建可