如何让响应式3x3网格适配方形外层div并按比例缩放？

你遇到的核心问题是固定尺寸的网格元素+未正确处理盒模型，导致页面缩放时网格溢出容器。下面是分步的解决方案：

问题根源拆解 #

1. 你的.wrapper设置了padding:1em，但内部的.box没有占满容器的可用空间，反而子元素用了固定的6vw宽高，还额外加了padding:1em，这会让元素总尺寸直接超过网格分配的空间。
2. 没有开启box-sizing:border-box，导致padding和border会额外增加元素的总尺寸，进一步加剧溢出情况。

修改后的完整代码 #

/* 全局开启border-box，让padding和border包含在元素尺寸内，避免额外扩容 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper{
  position: absolute;
  margin: auto;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 27vw;
  height: 27vw;
  background-color: #d8c7ff;
  border-radius: 10px;
  border: 4px solid purple;
  padding: 1em;
}

.box{
  display: grid;
  /* 让网格容器完全占满wrapper的内部可用空间 */
  width: 100%;
  height: 100%;
  /* 3列3行，平均分配容器空间 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* 设置网格间隙，基于父容器尺寸自适应 */
  gap: 5%;
}

.box > div{
  border: #333 1px solid;
  padding: 1em;
  background: red;
  /* 去掉固定宽高，让元素自动填充网格单元格 */
  height: 100%;
  /* 可选：让内部文本居中，优化视觉效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
  <div class="box">
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
    <div> hi </div>
  </div>
</div>

关键修改点说明 #

• 全局box-sizing:border-box：这是响应式布局的基础操作，确保元素的padding和border不会额外增加总尺寸，所有尺寸计算都包含这些属性。
• .box设置width:100%; height:100%：让网格容器完全占满.wrapper减去padding后的内部空间，保证网格和容器尺寸绑定。
• 移除子元素的固定宽高：改用height:100%让子元素自动填充网格单元格的空间，避免固定尺寸导致的溢出。
• 统一用gap属性：替代原来分开的grid-gap和column-gap，语法更简洁，同时间隙会基于.box的尺寸自动调整，不会导致总尺寸溢出。

这样修改后，你的3x3网格会完全适配方形容器，并且随外层.wrapper按比例缩放，再也不会出现溢出问题。

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