如何在元素动态显示时保持三列网格布局整齐统一？

我将若干div设置为三列布局，但部分div及其内容为动态元素，仅满足条件时才会显示。当前最后一行因只有两个div，它们各占50%宽度，布局不协调。我希望无论元素数量多少，每个div始终占据33%的宽度，保持网格布局整齐。

原代码 #

CSS #

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font: small-caps bold 24px/1 sans-serif;
}

.info {
  flex: 1 1 33%;
  box-sizing: border-box;
  border: 1px solid black;
  height: 100px;
}

HTML #

<div class="container">
  <div class="info">A</div>
  <div class="info">B</div>
  <div class="info">C</div>
  <div class="info">D</div>
  <div class="info">E</div>
  <div class="info">F</div>
  <div class="info">G</div>
  <div class="info">H</div>
</div>

解决方案 #

方法1：调整Flex属性固定宽度 #

原代码里flex: 1 1 33%的flex-grow:1会让最后一行元素自动拉伸剩余空间，把它改成不允许放大缩小即可：

修改.info的CSS：

.info {
  flex: 0 0 calc(33.333% - 2px); /* 减去边框宽度避免换行 */
  box-sizing: border-box;
  border: 1px solid black;
  height: 100px;
}

如果想让元素之间有间距，推荐用gap替代边框，更整洁：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* 左对齐保持网格整齐 */
  font: small-caps bold 24px/1 sans-serif;
  gap: 2px;
}

.info {
  flex: 0 0 33.333%;
  box-sizing: border-box;
  border: 1px solid black;
  height: 100px;
}

方法2：用CSS Grid布局（更省心） #

Grid天生适配这种固定列数的网格场景，直接指定三列即可，无需处理拉伸问题：

修改.container的CSS：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 2px;
  font: small-caps bold 24px/1 sans-serif;
}

.info {
  box-sizing: border-box;
  border: 1px solid black;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center; /* 内容居中 */
}

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