根据子大小更改更改 CSS 网格区域大小

Question

尝试使用悬停状态创建“流动网格”交互。

目标：将鼠标悬停在网格内的卡片上时，卡片的大小会增加，并“推动”其他列和行中的其他卡片，使其更小。

问题：我认为对网格父级使用“自动”大小会起作用，但事实并非如此。代码如下

.shape-card-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.shape-card {
  width: 100%;
  height: 100%;
  background: blue;
  border-radius: 64px;
  cursor: pointer;
  overflow: hidden;
  transition: background 300ms cubic-bezier(0.66, 0.11, 0.03, 0.96);
}

.shape-card:hover {
  width: 105%;
  height: 105%;
}

<div class="shape-card-container">
  <div class="shape-card">
   
  </div>
  <div class="shape-card">
    
  </div>
  <div class="shape-card">
   
  </div>
  <div class="shape-card">
   
  </div>
</div>

Answer 1

问题在于您的基于百分比的方法，它永远不会奏效，因为它在概念上存在根本缺陷。

当在width 或height 中使用时，百分比与包含上下文相关，在本例中为网格单元格。

调整网格单元格105% 的内容大小将始终使您的元素超出其所在的网格单元格。

如果网格单元会相应地调整大小以适应大小的增加，那么元素将如何成为105%？如果包含上下文确实不相应地调整大小，则只有105%，否则在调整大小的情况下，它将再次是调整大小的单元格的 100%（这将违反为 :hover 定义的规则）。

当您将基于像素的值与min-content 一起使用而不是auto 时，网格会按照您的预期进行：

.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, min-content);
  grid-template-rows: repeat(2, min-content);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.cell {
  width: 200px;
  height: 100px;
  background: blue;
  border-radius: 64px;
  cursor: pointer;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.66, 0.11, 0.03, 0.96);
}

.cell:hover {
  background-color: teal;
  width: 250px;
  height: 150px;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>