由于行和列定義中都包含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;
}
解
您可以嘗試以下方法：
>使用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;
}
