Adjust vertical alignment while using :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>

I'm trying to set up a page that shows all the site contributors in a grid;
I'm using this basic structure:

Horizontal space between columns, which is at least 63px (as column-right value), is automatically increased by justify-content: space-between
I'm using :after selector in order to align the elements of the last row to the left, but when the space between columns is increased by justify-content, the last row items (except for the first one) are vertically misaligned.
Here you can see a screenshot which better explain what I'm referring to.
Any suggestion will be appreciated :)

score 0 · Accepted Answer · answered Apr 08 '22 at 12:31

you can use grid to solve it.

.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>

Adjust vertical alignment while using :after

1 Answers1