当其他轨道增长时，CSS 网格的轨道不会缩小

Question

在下面的代码中，为什么当其他单元格放大时，网格跟踪单元格不会动态缩小？

在代码段中，如果将鼠标悬停在任何轨迹部分上，该单元格将增长到视点的 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>

Answer 1

由于行和列定义中都有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;
}

<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-template-columns: 1fr 1fr 的 2 列布局
• 为此使用隐式行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;
}

<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 网格自动添加不需要的列。