如何用Grid Layout实现Div重叠且不挤压下方行，保留网格结构

要实现Grid布局中元素尺寸增大时重叠到下方行、不挤动其他元素的效果，且保留原有网格结构，别用position: absolute，试试这两种方法：

方法一：用transform缩放（推荐） #

这种方式不会改变元素在网格中的占位尺寸，只是视觉上放大，完全不破坏网格布局，性能还更好：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  gap: 0; /* 可选，去掉间距让重叠更直观 */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  transition: transform 0.2s; /* 加个过渡动画更丝滑 */
  position: relative;
  z-index: 1; /* 默认层级，hover时提高避免被遮挡 */
}

.grid-item:hover {
  background-color: #ffcccc;
  transform: scale(1.5); /* 放大倍数可自行调整 */
  z-index: 2;
}

HTML代码保持不变：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

方法二：固定网格行高，允许元素溢出 #

如果必须调整元素的实际高度，给网格容器设置固定行高，让元素溢出到下方区域：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 70px; /* 固定行高，和默认元素高度匹配 */
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.grid-item:hover {
  background-color: #ffcccc;
  height: 90px;
  z-index: 2;
}

这两种方法都能保留网格的原有结构，hover时元素会重叠到下方行，不会挤动其他元素。

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