求助：CSS Grid项hover时改变高度且不打乱网格顺序的实现方法

核心思路 #

通过给网格项设置相对定位，让悬停时的高度变化仅改变视觉呈现，不影响网格布局的占位空间，同时利用层级控制确保悬停项显示在最上层，避免被其他网格项遮挡。

具体代码修改 #

假设你的网格容器和项的基础样式如下，只需添加/修改以下CSS：

网格容器样式（固定行高，维持原有布局） #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* 固定每行高度，可根据需求调整数值 */
  gap: 10px;
  padding: 10px;
}

网格项样式 #

.grid-item {
  position: relative; /* 关键：保持网格项在布局中的原有占位 */
  z-index: 1; /* 默认层级，确保未悬停项正常堆叠 */
  background-color: #e0e0e0;
  padding: 10px;
  height: 100%; /* 默认占满网格行高 */
  transition: height 0.3s ease; /* 添加上下高度变化的平滑过渡 */
  overflow: hidden; /* 可选：隐藏超出部分内容，也可改为auto显示滚动条 */
}

.grid-item:hover {
  height: 200px; /* 悬停时的目标高度，按需调整 */
  z-index: 2; /* 悬停时提升层级，让当前项覆盖其他网格项 */
}

原理说明 #

1. position: relative：让网格项保留在原网格布局中的占位位置，修改height时仅改变元素的视觉高度，不会触发网格行高调整或挤压其他项。
2. z-index：确保悬停的网格项显示在其他项上方，避免下方的网格项遮挡悬停项的扩展内容。
3. 固定grid-auto-rows：保证网格的基础行高稳定，从根源上防止单个项的高度变化打乱整体布局。

额外优化建议 #

• 若需要内容展开式的效果，可改用max-height替代height，配合overflow: hidden实现：将默认max-height设为行高，悬停时改为足够大的数值（如max-height: 500px）。
• 若网格项内有动态内容，可根据内容实际高度调整悬停时的目标值，或结合transform属性实现更自然的展开动画。

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