渡一教育：网格幻方

发布时间 2025-11-28 09:34:42

最后更新 2025-12-05 23:26:10

阅读量加载中...

此演示仅在桌面端浏览器中可用

     html
    
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scss 网格布局</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

     scss
    
  
@use "sass:list";
@use "sass:math";

.container {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 10px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 5px;
  transition: 0.5s;
}

@for $i from 1 through 9 {
  .item:nth-child(#{$i}) {
    background-color: hsl($i * 30, 50%, 50%);
  }

  .container:has(.item:nth-child(#{$i}):hover) {
    $row: math.ceil(calc($i / 3));
    $col: ($i - 1) % 3 + 1;

    $base: 1fr 1fr 1fr;

    grid-template-columns: list.set-nth($base, $col, 2fr);
    grid-template-rows: list.set-nth($base, $row, 2fr);
  }
}

scss 生成的对应 css 代码如下：

     css
    
  
.container {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 5px;
  transition: 0.5s;
}
.item:nth-child(1) {
  background-color: hsl(30, 50%, 50%);
}
.container:has(.item:nth-child(1):hover) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
}
.item:nth-child(2) {
  background-color: hsl(60, 50%, 50%);
}
.container:has(.item:nth-child(2):hover) {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
}
.item:nth-child(3) {
  background-color: hsl(90, 50%, 50%);
}
.container:has(.item:nth-child(3):hover) {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 2fr 1fr 1fr;
}
.item:nth-child(4) {
  background-color: hsl(120, 50%, 50%);
}
.container:has(.item:nth-child(4):hover) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}
.item:nth-child(5) {
  background-color: hsl(150, 50%, 50%);
}
.container:has(.item:nth-child(5):hover) {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}
.item:nth-child(6) {
  background-color: hsl(180, 50%, 50%);
}
.container:has(.item:nth-child(6):hover) {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
}
.item:nth-child(7) {
  background-color: hsl(210, 50%, 50%);
}
.container:has(.item:nth-child(7):hover) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 2fr;
}
.item:nth-child(8) {
  background-color: hsl(240, 50%, 50%);
}
.container:has(.item:nth-child(8):hover) {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 2fr;
}
.item:nth-child(9) {
  background-color: hsl(270, 50%, 50%);
}
.container:has(.item:nth-child(9):hover) {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr 2fr;
}

#渡一教育 #综合项目