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;

}

section1

section2

section3

section4

解

您可以尝试以下方法：

>使用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;

}

section1

section2

section3

section4