使用grid/flex实现8个元素3-3-2布局且最后一行元素居中

Grid实现方案 #

固定匹配8个元素的场景，改动最小：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  /* 定义三等分列 */
  grid-template-columns: repeat(3, 1fr);
  /* 可自定义间距大小 */
  gap: 16px;
  width: 100%;
}
.grid-item {
  height: 100px;
  background: #e5e7eb;
  border-radius: 4px;
}
/* 仅当总元素数为8时生效，将最后一行第一个元素放在第二列起始位置 */
.grid-item:nth-child(7):nth-last-child(2) {
  grid-column-start: 2;
}

Flex实现方案 #

适用性更强，后续元素数量变化时，不足3个的最后一行都会自动居中：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /* 所有行内容水平居中 */
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.flex-item {
  /* 扣除2个间距的总宽度，三等分得到单个元素宽度 */
  width: calc((100% - 32px) / 3);
  height: 100px;
  background: #e5e7eb;
  border-radius: 4px;
}

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