您需要在box类的容器上设置高度，并使用fr作为单位，而不是百分比。您需要容器高度，以便网格单元格可以根据它计算它们的高度。如果您使用fr而不是百分比，则在根据grid-template-columns和grid-template-rows的设置划分剩余空间之前，首先从容器宽度/高度中减去网格间隙。下面是一个工作示例：

<div class="box">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

body {
  margin: 0;
}

.box {
    background-color: hotpink;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 12px;
}

.card{
    border: 10px solid gray; // even with 10px or more nothing exceeds the container boundaries any more
    //height: 100%; // you do not need this, since the height is being calculated as a fr of the container height
    //box-sizing: border-box; // if you decide to set a height nonetheless you have to change box-sizing so the borders are not taking up extra space
    background-color: skyblue;
    border-radius: 6px;
}

尝试将30%替换为1fr

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

我肯定是迟到了，但是对于任何需要它的人，父容器grid-auto-rows的属性