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

Question

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

在 sn-p 中，如果您将鼠标悬停在任何轨道部分上，则该单元格会增长到视点的 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，所以水平和垂直空间受到限制 - 所以它们将平等共享 em> 由网格项。尝试将其更改为 auto 对于行和列，您会看到一切正常，但还不完美 - 请注意 hovered 周围有 空格 网格项目：

.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 Grid unwanted column added automatically。