如何根据子元素尺寸变化调整CSS grid-area大小实现悬浮流体网格效果

问题原因 #

你原本的实现方案存在两个核心问题：

• 给.shape-card设置了width: 100%、height: 100%，强制卡片占满所属网格单元格的固定尺寸，hover时修改为105%只会让卡片溢出单元格，不会触发网格轨道的尺寸重计算，自然无法挤压其他卡片。
• 空内容的卡片无法触发auto类型网格轨道的尺寸响应，auto会默认按最小可用空间分配轨道尺寸，不会随子元素尺寸变化调整。

修正方案 #

调整网格布局规则和hover触发逻辑，通过修改hover卡片的最小宽高撑开对应行列，实现挤压其他卡片的效果，完整可运行代码如下：

CSS代码 #

.shape-card-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  /* 初始用1fr让四个卡片等分容器空间 */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
}

.shape-card {
  /* 覆盖grid子元素默认的最小宽高规则，允许卡片被压缩 */
  min-width: 0;
  min-height: 0;
  background: blue;
  border-radius: 64px;
  cursor: pointer;
  overflow: hidden;
  /* 过渡包含所有尺寸相关属性变化 */
  transition: all 300ms cubic-bezier(0.66, 0.11, 0.03, 0.96);
}

.shape-card:hover {
  /* hover时撑开当前卡片的最小宽高，触发对应行列轨道扩容 */
  min-width: 60vw;
  min-height: 60vh;
}

HTML代码 #

<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>

参数调整说明 #

你可以自行修改.shape-card:hover里的min-width、min-height数值，调整悬浮时卡片的放大比例，数值越大悬浮卡片越大，其他卡片被挤压的幅度也越大。

内容的提问来源于stack exchange，提问作者davallree