如何让CSS Grid占满父容器宽高并均匀填充网格项？

嘿，我明白你想做一个能自动适配行列、填满容器的计算器按钮网格，现在出现滚动问题肯定很头疼～先看看你现有代码里的几个核心问题：

• 首先html和body的高度没完全设对，min-height: 100%没法让容器真正占满视口，得把html也加上height: 100%，不然高度传递会断档
• .container用position: absolute有点多余，反而容易导致布局脱离正常流，引发滚动
• 网格项的padding会撑大元素，没开box-sizing: border-box的话，实际尺寸会超出你预期，也可能导致溢出
• 固定的grid-template-rows: repeat(2, 1fr)如果后续加更多行，或者视口高度变化，容易出现滚动

调整后的实现方案 #

我给你改了一版代码，能实现不管设置多少行列，网格项都均匀填满父容器，还不会出现不必要的滚动：

/* 基础重置，确保高度传递正确 + 盒模型统一 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.container {
  width: 100%;
  height: 100%;
  padding: 10px; /* 可选：给容器加个内边距，避免按钮贴边 */
}

.wrapper {
  display: grid;
  /* 这里可以根据需求改行列数，比如repeat(4, 1fr)就是4列 */
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1px;
  /* 让网格完全填满容器高度，避免溢出 */
  height: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 12px;
  /* 让按钮内容居中，更像计算器按钮 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选：禁止按钮被压缩得太小 */
  min-height: 40px;
  min-width: 40px;
}

<section class="container">
  <div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
  </div>
</section>

关键调整点说明 #

• 高度传递修复：给html和body都设height: 100%，让.container和.wrapper能继承到完整的视口高度，不会出现高度不足或溢出
• 盒模型统一：开启box-sizing: border-box，让padding不会额外撑大网格项，尺寸计算更准确
• 去掉不必要的绝对定位：.container用正常流布局，避免布局脱离导致的滚动问题
• 网格项最小尺寸限制：加min-height和min-width，确保按钮不会因为视口太小被压缩到看不清

如果后续要动态调整行列数，比如改成4行4列，只需要修改grid-template-columns和grid-template-rows的值就行，网格会自动均匀分配空间，不会出现滚动～

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