由于行和列定義中都包含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网格的轨道不会缩...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。