* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #23262d;
}

.container {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
  transition: all 0.2s;
}

@for $i from 0 to 9 {
  // 不包含9
  .item:nth-child(#{$i + 1}) {
    background: hsl($i * 40%, 100%, 74%);
  }
  .container:has(.item:nth-child(#{$i + 1}):hover) {
    $r: floor($i / 3 + 1); // 1-3 求得第几行
    $c: $i % 3 + 1; // 1-3 求得第几列
    $arr: 1fr 1fr 1fr;
    $rows: set-nth($arr, $r, 2fr);
    $columns: set-nth($arr, $c, 2fr);
    grid-template-columns: $columns;
    grid-template-rows: $rows;
  }
}