如何让网格适配单元格宽度并消除红色虚线空白（保留宽高比）

问题描述 #

• 如何让网格适配单元格宽度？
• 如何移除下图中红色虚线标注的空白，使网格调整大小的同时保留子元素的宽高比？

注：需保持#container元素的独立性，不得修改其主要CSS属性；同时询问是否有基于Flexbox的替代方案。

示意图：

提供的原始代码：

CSS代码 #

#container {
  padding: 50px 80px;
  height: 70vh;
  display: flex;
  justify-content: center;
  background: grey;
}

#wrapper {
  background: red;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 6px;
  min-width: 0;
  height: 100%;
  width: 100%;
  background: white;
}

.cell {
  background: black;
  width: fit-content;
  min-width: 0;
  overflow: hidden;
  background-color: black;
  border: black;
  aspect-ratio: 3/2;
  display: flex;
  position: relative;
  box-sizing: border-box;
}

HTML代码 #

<body>
  <div id="before-container"></div>
  <div id="container">
    <div id="wrapper">
      <div id="board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
    </div>
  </div>
  <div id="after-container"></div>
</body>

解决方案 #

一、Grid布局优化方案（无需替换为Flexbox） #

当前问题核心是#board强制设置height:100%，导致单元格按宽高比计算后剩余空间出现空白。调整如下：

1. 移除#board的height:100%，让网格根据单元格宽高比自动计算高度；
2. 给#board添加max-height:100%，防止网格超出容器高度；
3. 将cell的width改为100%，让单元格填满网格列宽；
4. 给#wrapper添加overflow:auto，避免网格超出容器时内容截断。

修改后的CSS：

#container {
  padding: 50px 80px;
  height: 70vh;
  display: flex;
  justify-content: center;
  background: grey;
}

#wrapper {
  background: red;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: auto;
}

#board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 6px;
  min-width: 0;
  width: 100%;
  max-height: 100%;
  background: white;
}

.cell {
  background: black;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: black;
  aspect-ratio: 3/2;
  display: flex;
  position: relative;
  box-sizing: border-box;
}

调整后，网格会自动适配单元格宽度，无多余空白，同时保留单元格宽高比。

二、Flexbox替代方案 #

如果坚持使用Flexbox，可通过以下方式实现：

1. 将#board改为Flex布局并开启换行；
2. 通过calc计算单元格基础宽度，确保每行容纳5个单元格且间距均匀；
3. 保留单元格的aspect-ratio；
4. 给#wrapper添加overflow:auto处理溢出。

修改后的CSS：

#container {
  padding: 50px 80px;
  height: 70vh;
  display: flex;
  justify-content: center;
  background: grey;
}

#wrapper {
  background: red;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: auto;
}

#board {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  width: 100%;
  max-height: 100%;
  background: white;
}

.cell {
  background: black;
  flex: 0 0 calc(20% - (6px * 4 / 5));
  min-width: 0;
  overflow: hidden;
  border: black;
  aspect-ratio: 3/2;
  display: flex;
  position: relative;
  box-sizing: border-box;
}

calc(20% - (6px * 4 / 5))的逻辑是：5个单元格之间有4个间距，将总间距平均分配到每个单元格的宽度中，确保每行正好容纳5个单元格且间距均匀。

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