纯CSS实现动态九宫格效果

<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 {
  /* 容器尺寸 */
  width: 300px;
  height: 300px;
  
  /* Grid布局 */
  display: grid;
  
  /* 定义行高变量 */
  --row-1: 1fr;
  --row-2: 1fr;
  --row-3: 1fr;
  
  /* 应用行高变量 */
  grid-template-rows: var(--row-1) var(--row-2) var(--row-3);
  
  /* 定义列宽变量 */
  --col-1: 1fr;
  --col-2: 1fr;
  --col-3: 1fr;
  
  /* 应用列宽变量 */
  grid-template-columns: var(--col-1) var(--col-2) var(--col-3);
  
  /* 网格间距 */
  gap: 5px;
  
  /* 背景色 */
  background-color: #f0f0f0;
  
  /* 过渡动画 */
  transition: all 0.3s ease;
}

/* 网格项基础样式 */
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

/* 交替背景色便于区分 */
.grid-item:nth-child(even) {
  background-color: #2196F3;
}

/* 使用:has()伪类实现悬停效果 */
.grid-container:has(.grid-item:nth-child(1):hover) {
  --row-1: 2fr;
  --col-1: 2fr;
}

.grid-container:has(.grid-item:nth-child(2):hover) {
  --row-1: 2fr;
  --col-2: 2fr;
}

.grid-container:has(.grid-item:nth-child(3):hover) {
  --row-1: 2fr;
  --col-3: 2fr;
}

.grid-container:has(.grid-item:nth-child(4):hover) {
  --row-2: 2fr;
  --col-1: 2fr;
}

.grid-container:has(.grid-item:nth-child(5):hover) {
  --row-2: 2fr;
  --col-2: 2fr;
}

.grid-container:has(.grid-item:nth-child(6):hover) {
  --row-2: 2fr;
  --col-3: 2fr;
}

.grid-container:has(.grid-item:nth-child(7):hover) {
  --row-3: 2fr;
  --col-1: 2fr;
}

.grid-container:has(.grid-item:nth-child(8):hover) {
  --row-3: 2fr;
  --col-2: 2fr;
}

.grid-container:has(.grid-item:nth-child(9):hover) {
  --row-3: 2fr;
  --col-3: 2fr;
}

.grid-container:has(.grid-item:nth-child(1):hover) {
  --row-1: 2fr;
  --col-1: 2fr;
}