使用 :after 时调整垂直对齐方式

Question

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 63px;
}
.container:after {
  content: "";
  flex: auto;
}

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

我正在尝试设置一个在网格中显示所有站点贡献者的页面；
我正在使用这个基本结构：

列之间的水平 space，至少为 63px（作为 column-right 值），自动增加 justify-content: space-between
我正在使用 :after 选择器以便将最后一行的元素向左对齐，但是当列之间的 space 增加 justify-content 时，最后一行项目（除了第一个) 垂直未对齐。
Here 你可以看到一张截图，它能更好地解释我所指的内容。
任何建议将不胜感激:)

Answer 1

可以用grid来解决

.container {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill , minmax(100px,1fr));
  justify-items: center;
}
.item {
  width: 100px;
  height: 100px;
  background: red;
}

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

使用 :after 时调整垂直对齐方式

Adjust vertical alignment while using :after

css

layout

pseudo-class